Vue 路由

文章目录 一、介绍 二、命名式使用1.普通写法2.携带参数3.路由的props 三、编程式路由导航（不用 router-link）四、缓存路由组件和钩子1.缓存2.钩子activated和deactivated 五、路由守卫六、路由器（总）

一、介绍

一个路由就是一组映射关系（key - value）
key为路径，value为函数或者组件(VueComponent)

路由实现了页面区域刷新（本质上还是a标签）

npm i vue-router

路由组件放在 src/pages/ 下，
路由配置放在 src/router/index.js 下

二、命名式使用

main.js
 import VueRouter from ‘vue-router’
 import router from ‘./router’;
 Vue.use(VueRouter)

1.普通写法

<router-link to="/home/news">Newsrouter-link>
------------------------------------------------------------------
<router-view>router-view>

2.携带参数

2.1 query
参数形式：?key=value&key=value …

<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转router-link>
				

<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id: m.id,
		   title: m.title
		}
	}"
>跳转router-link>

// 接受参数
$route.query.id
$route.query.title

2.2 params
参数形式：直接像路径一样写，但是路由中以 /:id/:title表示参数
结合下面第二行代码：id=666，title=’你好‘

<router-link :to="/home/message/detail/666/你好">跳转router-link>


<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
		   title:'你好'
		}
	}"
>跳转router-link>

// 接受参数
$route.params.id
$route.params.title

3.路由的props

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，为true时，则把路由收到的所有 params 参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props($route){
		return {
			id: $route.query.id,
			title: $route.query.title
		}
	}
}

三、编程式路由导航（不用 router-link）

一些方法：push({}) 、replace({})、back()、forward()、go(n)

使用push直接跳转，和 router-link 的 to 差不多

// push 和 replace 一个是追加（router-link默认），一个是替换历史记录
this.$router.push({
	name:'xiangqing',
 	params:{
    	id:xxx,
    	title:xxx
  }
})

四、缓存路由组件和钩子

在更换路由时，旧路由（数据，运行中的方法等）会直接消失

1.缓存

防止input的输入丢失，keep-alive
弊端：如果有定时器类的处理，并不会暂停（可以用钩子解决）

// 缓存一个路由组件
<keep-alive include="News"> // include中写想要缓存的组件名，不写表示全部缓存
    <router-view>router-view>
keep-alive>

// 缓存多个路由组件
<keep-alive :include="['News','Message']"> 
    <router-view>router-view>
keep-alive>

2.钩子activated和deactivated

在启动了缓存的情况下，可以检测路由组件被激活和失活的状态，
以此来启动或关闭定时器任务

<script>
    export default {
        name:'News',
        activated(){
            console.log('News组件被激活了')
            this.timer = setInterval(() => { },1000)
        },
        deactivated(){
            console.log('News组件失活了')
            clearInterval(this.timer)
        }
    }
</script>

五、路由守卫

作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫
1.全局守卫

// 全局前置守卫：初始化时、每次路由切换前执行
router.beforeEach((to,from,next) => {
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ // 判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ // 权限控制的具体规则
			next()	// 放行
		}else{
			alert('暂无权限查看')
		}
	}else{
		next()	// 放行
	}
})

// 全局后置守卫：初始化时、每次路由切换后执行
router.afterEach((to,from) => {
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

2.独享守卫

beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
    if(localStorage.getItem('school') === 'atguigu'){
        next()
    }else{
        alert('暂无权限查看')
    }
}

3.组件内守卫

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {... next()},

//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {... next()},

回到顶部

六、路由器（总）

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建一个路由器
const router = new VueRouter({
    routes:[
        {
            name:'guanyv', // params 对象传参必用
            path:'/about',
            component:About,
            meta:{title:'关于'} // meta 可以存放任意信息
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children:[ // 路由嵌套 用children
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{title:'新闻'},
                    // 独享守卫，本路由切换之后被调用
                    beforeEnter(to,from,next){
                        console.log('独享路由守卫',to,from)
                        if(localStorage.getItem('school') === 'atguigu'){
                            next()
                        }else{
                            alert('暂无权限查看')
                        }
                    }
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{title:'消息'},
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                            meta:{title:'详情'},
                            // props 就是让传过去的 id 被 $route.query.id 赋值
                            // Detail 组件也要用 props 接收
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title,
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

// 全局后置守卫，每个路由被切出时调用
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.meta.title || '硅谷系统'
})

//导出路由器
export default router