当前位置：首页 > article >正文

Vue2中路由的使用

article 2024/11/11 6:18:26

vue-router是vue的一个插件库，专门用于SPA（单页面应用）
一个路由就是一组映射关系key-value，key是路径，value是组件
创建路由表，多级路由需要配置child时不需要写父路径

mode:设置路由模式

hash:哈希模式，默认模式，当URL改变的时候，页面不会重新加载，在URL中会有#不太美观，当用户刷新页面的时候，如果没有正确的路由匹配，可能会显示404
history:可以使用HTML5的History API来实现，URL中不会出现#，在使用的时候需要服务器配置支持

import VueRouter from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';
export default new VueRouter({
//路由工作的两种模式 默认是hash模式 mode改变模式为history模式
    mode: 'history',
    routes: [
        {
            path: '/home',
            component: Home,
            children: [
                //不需要写父路径 以及 /  也可以给路由命名 跳转时可以不用path 使用name即可
                { path: 'news', component: News,name:'news',
                    children: [
                        {
                            name: 'detail',
                            //路由使用parmas传参,跳转必须使用name不可以使用path  获取使用$route.params.id获取
                            path: 'detail/:id',
                            component: Detail,
                            //给details组件传递对象，所有数据在details中可以以props的方式接收
                            // props:{a:1,b:2}
                            //如果props是true，则路由收到的params参数会以props的形式传递 即 id 会以props方式传递
                            // props:true
                            // 如果props是函数，则路由同样以props的形式传递参数给组件，但是这可以通过route结构获取到query并传参（此处使用解构赋值的连续写法 先从route中结构获取query，再从query中结构出id，title
                            props({query:{id,title}}){ return {id,title} }
                            
                        }
                    ]
                },
                { path: 'messages', component: Message }
            ]
        },
        {
            path: '/about',
            component: About
        }
    ]
});

使用route-link来实现路由切换，route-view指定路由页面的展示位置
每一个组件都有自己的$route属性，存储自己的路由信息
整个应用只有一个router,通过$route获取
也可以借助push模式或者replace模式来实现路由跳转

keep-alive标签

可以使用keep-alive标签包含用来缓存路由组件，默认情况下缓存所有组件，可以使用：include="[‘组件名’]" 指定需要缓存的路由组件。exclude功能刚好相反

<keep-alive :include="['About']">
    <router-view></router-view>

</keep-alive>

<keep-alive :exclude="['News']">
    <router-view></router-view>

</keep-alive>

在使用keep-alive包含路由组件后，组件不会触发beforeDestory销魂流程，需要使用activated激活，deactivated()失活。

路由守卫

全局前置路由守卫，初始化，路由每次切换时别调用

router.beforeEach((to, from, next) => {
    if (to.meta.isAuth) {
        //判断权限
        if (localStorage.getItem('token') === 'user')
       //继续路由跳转
        next();
        else alert('undefind token');
    } else next()//取消跳转;
});

全局后置路由守卫，路由跳转完成后被调用的，不会接收next作为参数，所以不能用于阻止路由跳转

router.afterEach((to, from) => {
  // 路由跳转完成后的操作
});

路由独享守卫，可以在某个路由的配置中添加，只有在进入这个特定的路由时才会调用

{
  path: '/mine',
  component: MyComponent,
  beforeEnter: (to, from, next) => {
    // 路由独享守卫逻辑
  }
}

组件内路由守卫，包括beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave,分别在组件即将被渲染，当前路由改变但是组件被复用时，即将离开该组件时调用

export default {
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被确定前调用
    next();
  },
  beforeRouteUpdate (to, from, next) {
    // 当前路由改变，但是该组件被复用时调用
    next();
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    next();
  }
}

查看全文

http://www.kler.cn/a/312901.html