命名路由的配置规则
为了更方便的表示路由的路径 可以给路由规则起个别名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>命名路由</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- 导入vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- router-link 默认渲染为一个a标签 -->
<router-link to="/user/1">user1</router-link>
<router-link to="/user/2">user2</router-link>
<router-link :to="{name:'user',params:{id:3}}">user3</router-link>
<router-link to="/login">用户登录</router-link>
<router-view></router-view>
</div>
</body>
</html>
<script>
//组件的模版对象
const user = {
props: ['id', 'uname', 'age'], //接受
template: '<div>用户信息:{{id + " "+ uname+ " " +age}}</div>' //使用
// template: '<h1>user组件 用户id为{{$route.params.id}}</h1>'
}
const login = {
template: '<h1>用户登录组件</h1>'
}
//创建一个路由对象
const routerObj = new VueRouter({
//所有的路由规则
routes: [{
path: '/',
redirect: '/user'
}, { //命名路由
name: 'user',
path: '/user/:id',
component: user,
//当props是一个函数 则这个函数接受route对象为自己的形参
props: route => ({
id: route.params.id, //动态值
uname: '嘎达', //静态值
age: 12,
})
}, {
path: '/login',
component: login
}]
})
//创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
methods: {},
router: routerObj //将路由规则对象,注册到 vm 实例上,用来监听 URL 地址的变化,然后展示对应的组件
});
</script>