4.9 如何使用编程式导航
项目目录：
vue-router创建项目之后：
User.vue代码：
// User.vue里面的内容
<template>
<div>
<div>用户页面 {{$route.params.id}}</div>
<!-- <div>用户页面{{id}}</div> //传值3.这里直接调用props传递过来的id使用。 -->
<div>用户页面 {{id}}-{{title}}</div>
<button @click="goHome">跳转到首页</button> <!-- 编程式导航1.添加跳转按钮，添加事件！ -->
<button @click="goBack">后退</button>
</div>
</template>
<script>
export default {
//当路由参数变化时 /user/1切换到/user/2原来的组件实例会被复用
//因为两个路由渲染了同个组件 复用高效
created(){
console.log(this.$route.params.id);
console.log(this.$route);
},
methods:{ //编程式导航2.添加跳转事件方法！这两步即可实现！
goBack(){
this.$router.go(-1); //这里-1表示后退，0表示刷新，1表示前进！
},
goHome(){
// 编程式导航
// this.$router.push('/'); //方法1：这是字符串方法
// this.$router.push('name'); //方法2：
this.$router.push({ //方法3：这是对象方法！
path:'/'
});
// this.$router.push({ //方法4：跳转到用户2页面
// name:'user',
// params:{id:2}
// });
// this.$router.push({ //方法5：跳转到注册页面
// path:'/register',
// query:{plan:'123'}
// });
}
},
// props:['id'], //传值2.props接收传递过来的id。
props:['id','title'],
//响应路由参数的变化
// watch:{
// $route:(to,from)=>{ //to是到哪里去，from是来自哪里
// console.log(to.params.id);
// //发起ajax 请求后端接口数据 数据驱动视图
// }
// }
beforeRouteUpdate(to,from,next){
console.log(to.params.id);
//一定要调用next，不然会阻塞整个路由 放行
next();
}
}
</script>
<style lang="scss" scoped>
</style>
User.vue里面查看编程式导航！ 通过两步实现编程式导航！
index.js代码：
// index.js里面的内容
import Vue from 'vue';
// 1.导入
import VueRouter from 'vue-router';
// 2.模块化机制，使用Router
import HomeView from '../views/HomeView.vue';
import User from '@/views/User'; //@等同于..
// 3.创建路由器对象
Vue.use(VueRouter)
const routes = [
{
path:'/',
// redirect:'/home'
redirect:{name:'home'} //路由重定向，即：http://localhost:8083回车跳转到http://localhost:8083/home，显示页面还是同一个页面。
},
{
path: '/home',
name: 'home',
component: HomeView
},
//同一个路径可以匹配多个路由，匹配的优先级按照路由的定义顺序：谁先定义的，谁的优先级最高
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
// {
// path:'/about',
// name:'about',
// component:HomeView
// },
{
path:'/user/:id', //:id就是动态路由匹配
name:'user',
component:User,
// props:true //传值1.props值为true时，将path里面的id传递给component里面的User.vue里面。
//下面是通过props传id和title。
props:(route)=>({
id:route.params.id,
title:route.query.title
})
},
//http://localhost:8083/page?id=1&title=foo query
{
path:'/page',
name:'page',
component:()=>import('@/views/Page'), //这里的方法等同于import page from '../views/Page.vue'
alias:'/aaa' //给路由起别名
//给路由起别名(用的很少)http://localhost:8083/user/page?id=1&title=foo和http://localhost:8083/aaa都可以访问Page页面
},
{
path:'/user-*', //*是通配符
component:()=>('@/views/User-admin')
},
{
path:'*',
component:()=>import('@/views/404') //路由的执行顺序是从上到下，所以404永远要放在最后面。
}
]
const router = new VueRouter({
mode: 'history', //history模式，是干净的路由地址，即在地址栏里面没有#
base: process.env.BASE_URL,
routes
// routes:[
// {
// path:'/',
// redirect:'/home'
// }
// ]
})
export default router
// http://localhost:8081/user/1
// http://localhost:8081/user/2
// 同一个页面
main.js代码：
// main.js里面的内容
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
// 4.挂载到vue实例中
router,
render: h => h(App)
}).$mount('#app')
App.vue代码：
// App.vue里面的内容
<template>
<div id="app">
<nav> <!-- //<nav> 标签定义导航链接的部分 -->
<!-- //router_link相当于a标签，to属性相当于a标签的href -->
<!-- //<router-link to="/">Home</router-link> | 这是静态路由
<//router-link to="/about">About</> -->
<router-link :to="{name:'home'}">Home</router-link> | <!-- 这是动态路由 -->
<router-link :to="{name:'about'}">About</router-link> |
<!-- 声名式导航 -->
<router-link :to="{name:'user',params:{id:1}}">User1</router-link> | <!-- //params是参数的意思。 -->
<router-link :to="{name:'user',params:{id:2}}">User2</router-link> |
<router-link :to="{name:'page',query:{id:1,title:'foo'}}">Page</router-link>
<!-- //router-view相当于路由组件的出口 -->
</nav>
<router-view/>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
User-admin.vue代码：
// User-admin里面的内容
<template>
<div>
<h1>User-admin页面</h1>
<h2>{{$route.params.pathMatch}}</h2>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
Page.vue代码：
// Page.vue里面的内容
<template>
<div>
<h3>Page页面</h3>
</div>
</template>
<script>
export default {
created () {
// console.log(this.$route);
const {id,title} = this.$route.query;
console.log(id,title); //输出1,'foo'
//拿到id,title后，就可以和后端进行交互了。
},
}
</script>
<style lang="scss" scoped>
</style>
404.vue代码：
// 404.vue里面的内容
<template>
<div>
<h3>404页面</h3>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
vue-router建成后，需要改的就这些文件。
