zoukankan      html  css  js  c++  java
  • vue 路由的基本配置

    路由

    • 如果需要使用 vue router 驱动单页面应用,那就
      • App.vue 添加 <router-view/> 标签
      • router.js 中配置路由信息,
      • main.js 中引入 router.js 并绑定到 vue 实例。


    App.vue

    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
    <script>
      export default {
        name: "App",
      }
    </script>

    router.js

    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export const routes = [
      {
        path: "/login", // path 匹配地址栏url, 如地址栏输入 www.xxx.com/login 就会匹配该条规则
        component: () => import("@/views/login/Login") // 在主页面的 <router-view/> 中渲染指定的组件,这里就是 Login.vue
      }
    ]
    
    export default new Router({
      routes: routes
    })

    @ 是在 webpack 中配置的 src 目录的别名

    main.js

    import Vue from "vue"
    import App from "./App"
    import router from "./router"
    
    new Vue({
      el: "#app",
      router,
      render: h => h(APP)
    })
    • 实际情况应该是大多数页面都依托于布局组件 Layout,里面有一个侧边栏 SideBar,主页面 AppMain,导航栏 BreadCrumb,如下:

    Layout

    <template>
        <div>
            <breadcrumb/>
            <sidebar/>
            <app-main/>
        </div>
    </template>
    • 当我们点击 sidebar 时,应该是 sidebar 不变,app-main 的内容动态改变。这个时候刚才那个路由配置就不行了,应该上嵌套路由。

    • 具体就是像登录,错误页或者营销这些页面独享各自的布局(一级路由),那就放在主页面 App.vue 中动态渲染(在 App.vue 中添加 <router-view/> 标签)。

    • 而 dashboard,用户信息、产品信息、系统信息等等业务页面等,他们的布局都一致,也就是依托于布局组件 Layout (二级路由),那就把它们都交给 Layout 中的 app-main 取动态渲染(在 app-main.vue 中添加 <router-view/> 标签) , Layout 和登录,错误页一样,在 App.vue 中渲染。

    app-main.vue

    <template>
      <router-view/>
    </template>
    
    <script>
      export default {
        name: "app-main",
      }
    </script>

    修改下 router.js

    import Vue from 'vue'
    import Router from 'vue-router'
    import Layout from "@/views/layout/Layout"
    
    Vue.use(Router)
    
    export const routes = [
      {
        path: "/login", // path 匹配地址栏url, 如地址栏输入 www.xxx.com/login 就会匹配该条规则
        component: () => import("@/views/login/Login") // 在主页面App.vue <router-view/> 中渲染指定的组件,这里就是 Login.vue
      },
      {
        path: "/user",
        component: Layout, // 1.在主页面App.vue的 <router-view/> 中渲染基本布局组件 Layout
        children:[{
          path: "",
          component: () => import("@/view/user") // 2.Appmain 中的 <router-view/> 中渲染指定组件, 这里是用户信息
        }]
      },
      {
        path: "/system",
        component: Layout, // 1.在主页面App.vue的 <router-view/> 中渲染基本布局组件 Layout
        children:[{
          path: "",
          component: () => import("@/view/system") // 2.Appmain 中的 <router-view/> 中渲染指定组件, 这里是系统信息
        }]
      }
    ]
    
    export default new Router({
      routes: routes
    })

    转自:https://www.jianshu.com/p/16da5d103184感谢大神分享!

    App.vue

  • 相关阅读:
    springboot+mybatis集成多数据源MySQL/Oracle/SqlServer
    向Spring容器中注册组件的方法汇总小结
    使用spring initialization创建SpringBoot项目
    mybatis-generator 的坑我都走了一遍
    初识Jsp,JavaBean,Servlet以及一个简单mvc模式的登录界面
    【Linux】用户只显示$问题
    【Linux】Ubuntu创建用户、删除用户、设置用户密码,root和普通用户切换
    【linux】ubuntu安装ssh
    【整理】【JS】map的基本操作
    【整理】【JS】数组定义、添加、删除、替换、遍历基本操作
  • 原文地址:https://www.cnblogs.com/hudaxian/p/14539939.html
Copyright © 2011-2022 走看看