Vue路由

路由

实现单页面应用（SPA）

优点：整体不刷新页面，数据传递容易

缺点：首次加载比较慢，不利于SEO

基本使用

声明式导航

代替a标签，自带激活时的类名==router-link-active==

<router-link to="/组件名"></router-link>

​ 使用子路由时：还会加上router-link-exact-active 类名(精准匹配)

​ url的hash值和href完全匹配，但不常用

两种传参方式：

1.查询字符串

<router-link to="/组件名?参数名=值"></router-link>

//目标组件中
<p>{{$route.query.参数名}}</p>

2.动态路径参数

<router-link to="/组件名/值"></router-link>
需要路由对象提前配置path: "/path/:参数名"

//目标组件中
<p>{{$route.params.参数名}}</p>

重定向

匹配path后，强制跳转path路径

默认路径

const routes = [
	{
        path: '/',
        redirect: '/组件名'
    }
]

404页面

const routes = [
	{
        path: '*', //匹配不到就匹配这个
        component: NotFound //组件名
    }
]

路由模式设置

//5.通过规则创建对象
const router = new VueRouter({
    routes,
    mode: 'history'
})
//默认是hash： 有 "#"
//history不带#，但需要后端配合

编程式导航

this.$router.push({
    path: "路由路径",
    name: "路由名",  //二选一
    query:{
        '参数名': 值
    },
    params:{
        '参数名': 值
    },
})
//path 配合 query
//name 配合 query、params

query刷新页面还在，URL会明文显示

params刷新页面就没了，不会显示在URL上

$route 是路由参数对象，用于接收路由参数

$router 是路由对象，用于做路由导航，进行跳转

路由嵌套

const routes = [
    {
        path: "/find",
        component: Find,
        children:[
            {
                path: "ranking",
                component: ranking
            }//不要加斜杠（这表示根路径）
        ]
    }
]

全局前置守卫

作用：路由跳转之前，会触发一个函数

router.beforeEach((to,from,next) => {
    if(to.path == '/my' &&  isLogin == false){
        alert('你还没有登录')
        //next(false) 拦截
        next('/part') //跳转到其他页面
    }else{
		next() //正常跳转
    }
}) 

组件缓存

背景：在router切换组件时会销毁之前的组件

作用：不会频繁的创建和销毁组件，缓存之前组件的状态

<keep-alive>
    <router-view></router-view>
</keep-alive>

匹配缓存

<keep-alive include="My" exclude="My">
    //只包含;只排除 值是组件的name属性
    <router-view></router-view>
</keep-alive>

组件生命周期函数

背景：假设缓存的组件是新闻列表，刷新数据的方法在created方法中，这样将永远执行方法了

​ 因此组件缓存后会多两个钩子函数

activated - 激活时触发

deactivated -失去激活时触发