vue 路由的基本配置

时间：2021-03-17 14:08:54 阅读：0 评论：0 收藏：0 [点我收藏+]

路由

如果需要使用 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
})