Vue 命名路由

Vue 命名路由

作用：可以简化路由

router->index.js 添加name属性

//引入文件，该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/Home'
import Home from '../components/About'
import Message from '../components/Message'
import Detail from '../components/Detail'
//创建并暴露一个路由器
export default new VueRouter({
    routes: [{
            name:'about',
            path: '/about',
            component: About
        },
        {
            name:'home',
            path: '/home',
            component: Home,
            children: [{
            	name:'message',
                path: "message",
                component: Message,
                children: [{
            		name:'detail',
               	 	path: "detail",
                	component: Detail
            	}]
            }]
        }
    ]
})

在网页中跳转的办法：

完整路径写法：

<router-link to="/home/message/detail">message</router-link>

通过name跳转

<router-link :to="{name:'detail'}">message</router-link>

通过name跳转配合传递参数

<router-link 
:to="{
	name:'detail'
	query:{
		id:666,
		title:'hello'
	}
}">detail</router-link>