VueRouter

导入vuerouter模块

npm i vue-router@3 

创建router文件

在src目录下新建一个router文件夹在新建一个index.js文件

//引入VueRouter
import VueRouter from 'vue-router'
//创建并暴露一个路由器
export default new VueRouter({})

因为这是一个vuerouter是一个插件所以要在main.js中use一下 并引入index.js文件

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router 可简写为 router
})

使用路由

创建路由路径与多级路由childeren+redirect重定向

//引入组件 ...
export default new VueRouter({
	routes:[
        //path=路由路径  //component=要展示的组件
		{path:'*',redirect:'/home'}, //redirect重定向 *代表没创建路由路径的路径  自动指向/home
		{path:'/about', component:About,},
		{path:'/home', component:Home,children:[ //路由嵌套用children
			{path:'news', component:News},
			{path:'message', component:Message},

		]},
	]
})

<router-link> 路由跳转 （声明式导航）

          <router-link  to="/home">Home</router-link>   to+要去的路由路径

 router-link的 push/replase属性 默认为push 

//产生历史记录 （可回退） 
 <router-link  to="/home" push>Home</router-link>
//不产生历史记录 
  <router-link  to="/home" replace>Home</router-link>  

 <router-view> 显示子路由   要在哪显示子路由就放在哪

      <router-view></router-view>

多级路由name属性及 router-link query/params属性 

//当存在多级路由时可给子路由加一个name属性
        {path:'/home', component:Home,children:[
			{path:'news', component:News},
			{path:'message', component:Message,
				children:[
				query:		{path:'detil', component:Detail,name:'detil'}
                params:  {path:'detil/:id/:title', component:Detail,name:'detil'}
                           //传递几个参数写几个/:
			]
		},
//使用 
    //仅params： 
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>

   // query/params都可用：    没法使用path配置
        <router-link :to="{    //to前加 ： 因为to后面是个对象{} 
				name:'detil',  //尽量与path名相同  好区分
				query/params:{
					id:m.id,
					title:m.title
				}
/*接收
在子路由中通过 this.$route.query即可接受传query中传来的值
可通过computed 来接收  （能自动更改值）*/
        
    computed: {
			id(){
				return this.$route.query.id
			},
			title(){
				return  this.$route.query.title
			},
		},

 通过props获得params的值

/*创建路由路径时 传递一个props：true 的属性  当props为true时 将会把所有params参数 ，
转为props传给该组件*/
{path:'detail/:id/:title', component:Detail,name:'detail',props:true}

通过props获得query的值

//将props的值 改为函数
	{path:'detail', component:Detail,name:'detail',
props({query}){
    //props ()中的值为组件中的$route可通过解构方法 {query}或多重解构方法 {query:{id,title}}
    return {id:query.id,title:query.title}  
}        
}
    

this.$router.push() 编程式导航 

	//均在v-for  m in  xxx中
    <button @click="queryShow(m)">query查看</button>
	<button @click="paramsceShow(m)">params查看</button>
    methods:{
        
        queryShow(m){//和传递query值相同 注意传参即可
            this.$router.push({
                    name:'detail',
					query:{
						id:m.id,
						title:m.title
					}
                })	
            },
        paramsceShow(m){
			this.$router.push(`/home/message/detail/${m.id}/${m.title}`)
		}
}

历史记录前进和后退  

//前进
       this.$router.forward()
//后退
       this.$router.back()
//多次前进或后退
       this.$router.go()  //正数为前进 负数为后退

路由缓存 (多用于form表单)

//单个  
      <keep-alive include="News">     //include='要缓存的组件名'  
			<router-view></router-view>
		</keep-alive>
//多个
       <keep-alive :include=['','']>     //include='要缓存的组件名'  
			<router-view></router-view>
		</keep-alive>

路由中的生命周期 激活/失活（用于keep-alive 的路由组件）

可解决因缓存导致无法触发    beforeDestroy问题

	    activated(){
			this.timer =setInterval(() => {
				console.log(1);
			}, 1000);
		},
		deactivated(){
			clearInterval(this.timer)
		}

$nextTick DOM渲染完成后执行 可搭配create/activated使用（自动获得焦点）

		<li>news001 <input type="text" ref="inputa"></li>
      
          this.$nextTick(function(){
				this.$refs.inputa.focus()
			})

全局路由守卫 beforeEach前置/afterEach后置

//前置条件  创建的路由对象为router
const router=new VueRouter({
       ...  {path:'news', component:News,meta:{isAuto:true}},
			{path:'message', component:Message,meta:{isAuto:true}}...
			
})
//前置守卫
router.beforEach((to,from,next)=>{  //to要跳转到的组件,from从哪个组件来的,next执行 
        if(to.meta.isAuto)      //可自动判断是否需要守卫
	{
		if(localStorage.getItem('school')==='aaa')
		{
			next()
		}
	}
	else
	{	next()}
})
//后置守卫  
router.afterEach((to,from)=>{    //路由跳转后执行所以无next 多用于更改页面标签名 
/*可在meta中 增加 title：'xx'  
document.title=to.meta.title || 'xx' 即可 (||后防止未添加标题)*/
	document.title='尚硅谷'
})

独享守卫（前置  无后置独享守卫）

{path:'/about', component:About,
      beforeEnter:(to,from,next)=>{
			if(localStorage.getItem('school')==='bb')
	    		{next()}
			else{
				return 0
			}
			next()
		}},

组件内的路由守卫

		beforeRouteEnter(to,from,next){} //从别的组件通过路由进入时
        beforeRouteLeave(to,from,next){}//从该组件通过路由离开时