Vue编程式导航
编程式导航和上面说的声明式导航的区别在于，声明式导航是先写好便签，然后进行导航。
编程式导航通过代码直接进行了导航。
通过this.$router.push()这个方法来实现编程式导航，
当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转。
<!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> <!-- 通过this.$router.push()这个方法来实现编程式导航， 当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转 --> <h2>声明式导航</h2> <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-link to="/emp-select">员工查询</router-link> <router-link to="/emp-add">员工新增</router-link> <router-link to="/emp-delete">员工删除</router-link> <hr> <h2>编程式导航</h2> <button @click="doRedirect('login')">登录组件</button> <button @click="doRedirect('register')">注册组件</button> <button @click="doRedirect('user')">用户组件</button> <button @click="doRedirect('emp')">员工组件</button> <!-- 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>", // 当使用路由参数是，例如：/user/101导航到/user102，想通组件实例将被重复使用， // 这意味着组件的生命周期钩子不会被调用 // 如果想对路由参数变化做出相应，需要使用watch侦听器 mounted () { console.log('User mounted'); }, watch: { /* 侦听当前路由的变化，当路由变化时候，可以做出一些响应*/ '$route'(to, from){ console.log(to,from); console.log('$route监听了路由变化了'); } } } let NotFount = { template:'<div><h1>页面没有找到</h1></div>', } let Index = { template:'<div><h1>欢迎使用本系统</h1></div>' } let Emp = { template:'<div><h1>员工组件</h1></div>' } let User = { template:'<div><h1>用户组件</h1></div>' } // 2、定义路由列表 /* 在router里面配置每一个路由，每一个路由就是一个对象 path：表示路由路径，字符串，需要以/开头 component:表示路由对应的组件 */ //路由列表的匹配模式是自上到下逐个匹配，匹配到了就执行 //把带匹配的路径都进行放到后面 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 }, ] //3、创建router实例,当引入Vue.router之后，VueRouter就会成为全局函数 let router = new VueRouter({ //配置路由列表,配置项的名称routes routes:routes }) let vm = new Vue({ el : "#app", data : { }, //4、将创建号的rouer实例，绑定给vue实例的router属性 router, methods: { doRedirect(str) { //this.$router.push('跳转路径') this.$router.push('/' + str); } } }) </script> </body> </html>
