Vue动态路径参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h1>hello vue router</h1> <!-- router-link是vueRouter提供的组件 组件的作用是进行路由导航,呗vue解析之后成为一个超链接 to属性：配置路由路径 --> <router-link to="/login">登录</router-link> <router-link to="/register">注册组件</router-link> <router-link to="/user/101">用户101</router-link> <router-link to="/user/102">用户102</router-link> <!-- router-view组件 当我们点击router-link之后，会根据路径去找对应的组件，找到对应的组件后，在router-view位置显示 --> <router-view></router-view> </div> <script src="../js/vue.js"></script> <!-- 先引入vue的核心库，再引入router的核心库 --> <script src="../js/vue-router.js"></script> <script> // 1、定义组件 const Login = { template:"<div><h1>登录组件</h1></div>" } let register = { template:"<div><h1>注册组件</h1></div>" } let User = { template:"<div><h1>用户组件{{$route.params.id}}</h1></div>" } // 2、定义路由列表 /* 在router里面配置每一个路由，每一个路由就是一个对象 path：表示路由路径，字符串，需要以/开头 component:表示路由对应的组件 */ let routes = [ { path:'/login',component:Login }, { path:'/register',component:register }, { //*表示通配符 path:'/user/:id',component:User } ] //3、创建router实例,当引入Vue.router之后，VueRouter就会成为全局函数 let router = new VueRouter({ //配置路由列表,配置项的名称routes routes:routes }) let vm = new Vue({ el : "#app", data : { }, //4、将创建号的rouer实例，绑定给vue实例的router属性 router }) </script> </body> </html>
当使用路由参数是，例如：/user/101导航到/user102，想通组件实例将被重复使用，这意味着组件的生命周期钩子不会被调用。
例如：我们在组件中增加mounted方法，log函数只会被执行一次
mounted () {
console.log('User mounted');
}
如果想对路由参数变化做出相应，需要使用watch侦听器。
watch: {
/*
侦听当前路由的变化，当路由变化时候，可以做出一些响应*/
'$route'(to, from){
console.log(to,from);
console.log('$route监听了路由变化了');
}
}
路由列表的匹配模式是自上到下逐个匹配，匹配到了就执行
把带匹配的路径都进行放到后面
let routes = [
{
path:'/login',component:Login
},
{
path:'/register',component:register
},
{
//*表示通配符
path:'/user/:id',component:User
},
{
//*表示通配符
path:'/emp-*',component:Emp
},
{
path:'/',component:Index
},
{
path:'/*',component:NotFount
},
]
