6、vue-router编程式导航（页面跳转） · 2021 web前端工程师

# 6、vue-router编程式导航（页面跳转） * [5.1页面导航的两种方式](https://www.kancloud.cn/zheng1234/vuejs/2393802#51_1) * [5.1编程式导航基本用法（vue 页面跳转重点）](https://www.kancloud.cn/zheng1234/vuejs/2393802#51___vue_____8) * [5.2编程式导航参数规则](https://www.kancloud.cn/zheng1234/vuejs/2393802#52_25) * [router.push()方法的参数规则](https://www.kancloud.cn/zheng1234/vuejs/2393802#routerpush_26) * [代码分析](https://www.kancloud.cn/zheng1234/vuejs/2393802#_38) # 5.1页面导航的两种方式 ●**声明式导航**:通过**点击链接**实现导航的方式，叫做声明式导航例如:普通网页中的`<a></a>`链接或vue中的`<router-link> </router-link>` ●**编程式导航**:通过**调用JavaScript**形式的API实现导航的方式，叫做编程式导航例如:普通网页中的location.href # 5.1编程式导航基本用法（vue 页面跳转重点）常用的编程式导航API如下: ●this. Srouter.**push**('hash地址' ) // 跳转指定组件页面 ●this. Srouter.go (n) // 前进后退历史记录上一个页面 ~~~ const User = { template:`<div> <button @click= "goRegister ">跳转到注册页面</button></div>`， methods :{ goRegister :function() { //用编程的方式控制路由跳转 this.Srouter.push(' /register') ; } } } ~~~ ## 5.2编程式导航参数规则 ### router.push()方法的参数规则 //字符串(路径名称) router.push( ' /home ' ) //对象 router.push({ path: ' /home' }) //命名的路由(传递参数) router.push( { name :' /user'，params: { userId: 123 } }) //带查询参数，变成/register?uname=lisi router.push({ path: ' /register', query: { uname : 'lisi' } }) ## 代码分析 ~~~ <body>  <div id="app">  <router-link to="/user1">User1</router-link> <router-link to="/user2">User2</router-link> <router-link :to="{name:'user',params:{id:3}}">User3</router-link> <router-link to="/register">Register</router-link>  <router-view></router-view> </div> <script type="text/javascript"> //定义路由组件 const User = { props: ['id', 'uname', 'age'], //路由组件中通过$route.params获取路由参数 template: `<div> <h1>User组件--用户id为:{{id}}--姓名为:{{uname}}--年龄为: {{age}}</h1> <button @click="goRegister">跳转到注册页面</button> </div>`, methods: { goRegister() { //$router.push();可以跳转都那个页面 this.$router.push('/register') } } } const Register = { template: `<div> <h1>Register 组件</h1> <button @click="goBack">后退</button> </div>`, methods: { goBack() { //.$router.go();可以通过返回 this.$router.go(-1); } } } //创建路由实例 const router = new VueRouter({ //所有的路由规则 routes: [ //path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址 { path: '/', redirect: '/user' }, //动态路径参数以冒号开头 :id //如果props 是一个对象，它会被按原样设置为组件属性 { //命名路由 name: 'user', path: '/user:id', component: User, props: route => ({ uname: 'lisi', age: 12, id: route.params.id }) }, { path: '/register', component: Register } ] }) const vm = new Vue({ el: '#app', data: {}, //挂载路由实例对象 //router: router router }) </script> </body> ~~~