VUE：路由
一、说明
1）官方提供的用来实现SPA的vue插件
2）github：https://github.com/vuejs/vue-router
3）中文文档：http://router.vuejs.org/zh-cn/
4）下载：npm install vue-router --save
二、相关API
1）VueRouter()：用于创建路由器的构建函数
new VueRouter{{ //多个配置项 }}
2）路由配置：
routes:[ {//一般路由 path:'/about', component:About }, {//自动跳转路由 path:'/', redirect:'/about' }, ]
3）注册路由器：
import router from './router' new Vue({ router })
4）使用路由组件标签
1.<router-link>：用来生成路由链接
<router-link to='/xxx'>Go to XXX</router-link>
2.<router-view>：用来显示当前路由组件界面
<router-view></router-view>
三、基本路由
<template> <div> About </div> </template> <script> export default{ } </script> <style> </style>
<template> <div> Home </div> </template> <script> export default{ } </script> <style> </style>
<template> <div> <div> <h2>Taosir is studying...</h2></div> <div> <router-link to="/about">About</router-link> <router-link to="/home">Home</router-link> </div> <div> <router-view></router-view> </div> </div> </div> </div> </template> <script> export default { } </script> <style> </style>
import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ //配置对象的属性名都是一些确定的名称，不能随便修改 el: '#app', router, components: { App }, template: '<App/>', router })
/* * 路由器模块 */ import Vue from 'vue' import VueRouter from 'vue-router' import About from '../views/About.vue' import Home from '../views/Home.vue' Vue.use(VueRouter) export default new VueRouter({ //n个路由 routes:[ { path:'/about', component:About },{ path:'/home', component:Home },{ path:'/', redirect:'/about' } ] })
四、嵌套路由
在上面的基础上Home加了一层嵌套
<template> <div> <ul> <li v-for="(news,index) in newsArr" :key="index">{{news}}</li> </ul> </div> </template> <script> export default{ data(){ return{ newsArr:['news001','news002','news003','news004'] } } } </script> <style> </style>
<template> <div> <ul> <li v-for="(message,index) in messages" :key="message.id"> <a href="???">{{message.title}}</a> </li> </ul> </div> </template> <script> export default{ data(){ return { messages:[] } }, mounted(){ //模拟ajax请求从后台获取数据 setTimeout(()=>{ const messages=[ { id:1, title:'message001', },{ id:3, title:'message003', },{ id:5, title:'message005', } ] this.messages=messages },1000) } } </script> <style> </style>
<template> <div> <h2>Home</h2> <div> <ul> <li><router-link to="/home/news">News</router-link></li> <li><router-link to="/home/message">Message</router-link></li> </ul> <div> <router-view></router-view> <hr /> </div> </div> </div> </template> <script> export default{ } </script> <style> </style>
/* * 路由器模块 */ import Vue from 'vue' import VueRouter from 'vue-router' import About from '../views/About.vue' import Home from '../views/Home.vue' import News from '../views/News.vue' import Message from '../views/Message.vue' Vue.use(VueRouter) export default new VueRouter({ //n个路由 routes:[ { path:'/about', component:About },{ path:'/home', component:Home, children:[ { path:'/home/news', component:News },{ path:'message', component:Message },{ path:"", redirect:"/home/news" } ] },{ path:'/', redirect:'/about' } ] })
<style> .router-link-active{ color:red !important; } </style>
五、缓存路由的实现
<keep-alive> <router-view></router-view> </keep-alive>
六、向路由组件传参
1）通过path
2）通过标签<router-view>
<template> <div> <p>ID：{{$route.params.id}}</p> <ul> <li>id:{{messageDetail.id}}</li> <li>title:{{messageDetail.title}}</li> <li>content:{{messageDetail.content}}</li> </ul> </div> </template> <script> export default { data() { return { messageDetail: {} } }, mounted() { setTimeout(() => { const allMessageDetails = [{ id: 1, title: 'message001', content: 'message001 content...' }, { id: 2, title: 'message002', content: 'message002 content...' }, { id: 4, title: 'message004', content: 'message004 content...' }] this.allMessageDetails=allMessageDetails const id=this.$route.params.id*1 this.messageDetail=allMessageDetails.find(detail=>detail.id===id) },1000) }, watch:{ $route:function(value){//路由路径（param）发生了改变 const id=value.params.id*1 this.messageDetail=this.allMessageDetails.find(detail=>detail.id===id) } } } </script> <style> </style>
/* * 路由器模块 */ import Vue from 'vue' import VueRouter from 'vue-router' import About from '../views/About.vue' import Home from '../views/Home.vue' import News from '../views/News.vue' import Message from '../views/Message.vue' import MessageDetail from '../views/MessageDetail.vue' Vue.use(VueRouter) export default new VueRouter({ //n个路由 routes:[ { path:'/about', component:About },{ path:'/home', component:Home, children:[ { path:'/home/news', component:News },{ path:'message', component:Message, children:[ { path:'detail/:id', component:MessageDetail } ] },{ path:"", redirect:"/home/news" } ] },{ path:'/', redirect:'/about' } ] })
<template> <div> <ul> <li v-for="(message,index) in messages" :key="message.id"> <router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link> </li> </ul> <hr /> <router-view></router-view> </div> </template> <script> export default{ data(){ return { messages:[] } }, mounted(){ //模拟ajax请求从后台获取数据 setTimeout(()=>{ const messages=[ { id:1, title:'message001', },{ id:2, title:'message002', },{ id:4, title:'message004', } ] this.messages=messages },1000) } } </script> <style> </style>
<template> <div> <div> <h2>Taosir is studying...</h2></div> <div> <router-link to="/about">About</router-link> <router-link to="/home">Home</router-link> </div> <div> <router-view msg="abc"></router-view> </div> </div> </div> </div> </template> <script> export default { } </script> <style> </style>
<template> <div> <h2>About</h2> <p>{{msg}}</p> </div> </template> <script> export default{ props:{ msg:String } } </script> <style> </style>
七、编程式路由导航
<template> <div> <ul> <li v-for="(message,index) in messages" :key="message.id"> <router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link> <button @click="pushShow(message.id)">push查看</button> <button @click="replaceShow(message.id)">replace查看</button> </li> </ul> <button @click="$router.back()">回退</button> <hr /> <router-view></router-view> </div> </template> <script> export default{ data(){ return { messages:[] } }, mounted(){ //模拟ajax请求从后台获取数据 setTimeout(()=>{ const messages=[ { id:1, title:'message001', },{ id:2, title:'message002', },{ id:4, title:'message004', } ] this.messages=messages },1000) }, methods:{ pushShow(id){ this.$router.push(`/home/message/detail/${id}`) }, replaceShow(id){ this.$router.replace(`/home/message/detail/${id}`) } } } </script> <style> </style>
1）this.$router.push(path)：相当于点击路由链接（可以返回到当前的路由界面）
2）this.$router.replace(path)：用新路由替换当前路由（不可以返回当前的路由界面）
3）this.$router.back()：请求（返回）上一个记录路由
4）this.$router.go(1)：请求（返回）上一个记录路由