vue嵌套路由(多级路由)和命名路由

vue嵌套路由
1.src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Message from '../views/Message.vue'
......这里省略n个组件的引用

const routes = [
  {
    path: '/home',//一级路由
    name: 'Home',
    component: Home,
    children:[
    	{
    		path:'news',//二级路由，不用加斜杠/,vue底层封装的时候加过了
    		component:News,
    	},
    	{
    		path:'message',
    		component:Message,
    		children:[
    			name:'detailCom'
    			path:'detail',
    			component:Detail,
    		]
    	}
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: About 
  }
]

export default new VueRouter({
  mode: 'history',
  routes
})

2.跳转

 <router-link to="/home/news" ></router-link>

当我们的路由层级较多时，我们也可以给路由起个名字，即命名路由，通过命名路由也可以实现路由的跳转
路由文件中给对应路由配置name属性

跳转路由时要用对象形式：

 <router-link :to="{
 	name:'detailCom',//跳转命名路由
 	query:{ ...... }
 }" ></router-link>