Vue-router

最新推荐文章于 2024-04-26 02:01:26 发布
最新推荐文章于 2024-04-26 02:01:26 发布
阅读量169 收藏
点赞数 1
文章标签： 其他 经验分享 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52013792/article/details/121620049
版权

路由

  1. 理解：一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）管理。

  2. 前端路由：key是路径,value是组件。

1.基本使用

  1. 安装vue-router，命令：npm i vue-router

  2. 应用插件：Vue.use(VueRouter)

  3. 编写router配置项：

    //引入VueRouter
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'
​
//创建并暴露router实例对象，去管理一组组的路由规则
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'home',
            component:Home
        }
    ]
})

  4. 实现切换（active-class可配置高亮样式）

    <router-link active-class="active" to="/about">About</router-link>

  5. 指定展示位置

    <router-view></router-view>

2.几个注意点

  1. 路由组件通常存放在pages文件夹，一般组件存放在components文件夹。

  2. 通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载。

  3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。

  4. 整个应用只有一个router，可以通过组件的$router属性获取到。

3.多级路由（嵌套路由）

  1. 配置路由规则，使用children配置项：

        routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[//通过children配置子级路由
                {
                    path:'news',//此处不要写'/news'
                    component:News,
                },
                {
                    path:'message',//此处不要写'/message'
                    component:Message,
                }
            ]
        }
    ]

  2. 跳转（要写完整路径）：

    <router-link to='/home/news'>News</router-link>

4.路由的query参数

  1. 传递参数：

    <!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/news/detail?id=666&title=你好">News</router-link>
​
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
      :to="{
              path:'/home/news'
              query:{
              id:666,
              title:'你好'
                  }
          }"
             >News</router-link>

  2. 接收参数

    $route.query.id
$route.query.title

5.命名路由

  1. 作用：可以简化路由的跳转。

  2. 如何使用：

    1. 给路由命名：

      routes:[
    {
        path:'/about',
        component:About
    },
    {
        path:'/home',
        component:Home,
        children:[//通过children配置子级路由
            {
                name:'xinwen'
                path:'news',//此处不要写'/news'
                component:News,
            },
            {
                name:'xiaoxi'
                path:'message',//此处不要写'/message'
                component:Message,
            }
        ]
    }
]

    2. 简化跳转

      <!--简化前，使用完整路由跳转-->
<router-link :to="/home/news/detail">News</router-link>

<!--简化后，使用名字直接跳转-->
<router-link :to="{name:xinwen}">News</router-link>



<!--简化前，使用完整路由配合传值跳转-->
<router-link :to="/home/news/detail?id=666&title=你好">News</router-link>

<!--简化后，使用完整路由跳转-->
<router-link :to="{
                  name:'xinwen',
                  query:{
                               id:666,
                               title:'你好'
                               }
                  }">News</router-link>

6.路由的params参数

  1. 配置路由声明接收params参数

    {
        path:'/home',
        component:Home,
        children:[
            {
                path:'news',
                component:News,
            },
            {
                path:'message',
                component:Message,
                children:[
                    {
                        name:'xiangqing',
                        path:'detail/:id/:title',
                        component:Detail
                    }
                ]
            }
        ]
    }

  2. 传递参数

    <!--跳转并携带params参数,to的字符串写法-->
<router-link :to="/home/news/detail/666/你好">News</router-link>

<!--跳转并携带params参数,to的对象写法-->
<router-link :to="{
                  name:'xiangqing',
                  params:{
                                  id:666,
                                  title:'你好'
                                  }
                  }">News</router-link>

    注意：路由携带params参数时，若使用to的对象写法，则不能用path配置项，只能用name

  3. 接收参数

    $route.params.id
$route.params.title

7.路由的props配置

作用：让路由组件更方便的收到参数

{
    name:'xiangqing',
    path:'detail/:id/:title',
    component:Detail,
    
    //第一种写法：props值为对象，该对象中所有的key:value的组合最终都会通过props传给Detail组件
    props:{a:900}
    
    //第二种写法：props值为bool值，bool值为true，则把路由收到的所有params参数通过props传给Detail组件
    props:true
    
    //第二种写法：props值为函数，该函数返回的对象中每一组key:value都会通过props传给Detail组件
    props(route){
        return{
            id:route.query.id,
            title:route.query.tiele
        }
    }
}

8.<router-link>的replace属性

  1. 作用：控制路由跳转时操作浏览器历史记录的模式。

  2. 浏览器的历史记录有两种写入方式：分别是push和replace，push是追加历史记录，replace是替换当前记录，路由跳转的时候默认为push

  3. 如何开启replace模式：<router-link replace ...>News</router-link>

9.编程式路由导航

  1. 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

  2. 具体编码：

    //$router的两个API
this.$router.push({
    name:'xiangqing',
    params:{
        id:xxx,
        title:xxx,
    }
})

this.$router.replace({
    name:'xiangqing',
    params:{
        id:xxx,
        title:xxx,
    }
})

this.$router.forward()//前进
this.$router.back()//后退
this.$router.go()//可前进也可后退

10.缓存路由组件

  1. 作用：让不展示的路由组件保持挂载，不被销毁。

  2. 具体编码：

    <keep-alive include = "组件名">
    <router-view></router-view>
</keep-alive>

11.两个新的生命周期钩子

  1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

  2. 具体名字：

    1. activated路由组件被激活时触发。

    2. deactivated路由组件失活时触发。

12.路由守卫

  1. 作用：对路由进行权限控制

  2. 分类：全局守卫、独享首位、组件内守卫

  3. 全局守卫

    const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About,
            meta:{isAuth:true,title:'关于'}//meta用于自定义属性,一般用isAuth表示是否需要进行权限控制
        },
        {
            path:'home',
            component:Home,
            meta:{title:'主页'}
        }
    ]
})
​
//全局前置守卫，初始化时执行，每次路由切换前执行
router.beforeEach(to,from,next)=>{//to：跳转到的路由 from：被跳转路由 next()放行
    if(to.meta.isAuth){//判断是否需要进行权限控制
            //权限控制的具体规则
    }else{
        
    }   
}
​
//全局后置守卫，初始化时执行，每次路由切换后执行
router.afterEach(to,from)=>{//to：跳转到的路由 from：被跳转路由
       if(to.meta.title){
          document.title = to.meta.title//修改网页title
          }else{
              document.title = 'test'
          }
}
​
export default router

  4. 独享路由守卫

    const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About,
            meta:{isAuth:true},//meta用于自定义属性
            beforeEnter(to,from,next){
                if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
​
                }else{
​
                }
            }
        },
        {
            path:'home',
            component:Home
        }
    ]
})

  5. 组件内路由守卫

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

13.路由器的两种工作模式

  1. 对于一个url来说，什么是hash值？----#及其后面的内容就是hash值。

  2. hash值不会包含在http请求中,即：hash值不会带给服务器

  3. hash模式：

    1. 地址中永远带着#，不美观。

    2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记不合法。

    3. 兼容性较好。

  4. history模式：

    1. 地址干净美观。

    2. 兼容性和hash模式相比略差。

    3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404问题。

  5. 模式调节：

    const router = new VueRouter({
    mode:'history',
    routes:[
        ...
    ]
})
欢dog
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
入门到精通vue-router，下面知识点就够了
空寻的博客
08-08 127
路由 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。 前端路由：key是路径，value是组件。 1.基本使用 安装vue-router，命令：npm i vue-router 应用插件：Vue.use(VueRouter) 编写router配置项: //引入VueRouter import VueRouter from 'vue-router' //引入Luyou 组件 import About from '../co
Vue中模块化路由之后，添加路由守卫beforeEach之后，next传递参数会陷入死循环的问题
wusu0wei的博客
11-14 3331
next传递参数的时候出现的递归问题 本来想做一个测试，写了一个简单的登录注册，想着判断一下登录的token之后做一个路由跳转，但是在router.beforeEach((to,from,next)=>{next()})是可以正常跳转的，但是只要next传递参数的时候就会出现如下的错误： router.beforeEach((to,from,next)=>{ next('/reg') }) RangeError: Maximum call stack size exceeded 大概查了一
vue-router(路由原理、路由守卫、传参)
m0_63165596的博客
12-29 1307
路由原理 路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。 hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash， hash不会重加载页面。， 即使没有做到对路由的全覆盖，也不会返回404 错误。 history模式：可以对浏览器历史记录栈进行修改,监听到状态变更。 特点: history 前端的URL 必须和实际向后端发起请求的URL一致，不然将返回404 错误。 路由传参： 三种： ...
Vue router 全局守卫中调用next()时，params无法传递到跳转后的页面
热门推荐
c2311156c的博客
05-23 1万+
问题如题，代码如下：在beforeeach()中，调用next():next({ path: 'login', params: { toPath: 'aaa' }})在跳转后的页面中接参：this.$route.params.toPath，接收到的参数始终为undefined....问题的原因在与，...
VueRouter进阶（1）-导航守卫
weixin_34001430的博客
12-25 212
简介 主要用来通过跳转或取消的方式守卫导航。例如判断登录信息：没登录全部跳到登录页。判断必要操作是否进行没进行的话中断跳转。 分为三大类：全局守卫、路由守卫、组件守卫 全局守卫 1. beforeEach 2. beforeResolve 3. afterEach 路由守卫 1. beforeEnter 组件守卫 1. befo...
Vue路由守卫的三种方式，及其钩子函数和参数
chenxiaoyu97的博客
07-05 6723
1）、全局守卫 全局守卫有前置守卫和后置守卫，是vueRouter对象的两个钩子函数，分别是 beforeEach和afterEach。 ​ 前置守卫： router.beforeEach((to, from, next) => { // to: 目标路由 // from: 当前路由 ​ // next() 跳转 一定要调用 next(false);//不让走 next(true);//继续前行 next('/login')//走哪
vue路由守卫中next方法的理解
weixin_46995731的博客
09-27 1万+
vue路由守卫中next方法的理解 在网上看到了一篇通俗易懂的文章,此文章出处 在这里我用通俗点的说法解释上next(),next(false),next(’/’),next(error)，希望通过这接地气的解释你能掌握这几个知识点。 背景：你乘坐汽车从A景区想赶往B景区（模拟路由A跳转到路由B） 1.next() 你乘坐汽车要从A景区到B景区，路过关卡时，守门人拦下你，你量出了next()，守门人一看没问题，赶紧放行，于是你顺利到达了B景区。 2.next(false) 如果你量出了next(fal
vue3.0 的各种路由守卫的使用，以及参数解析
weixin_48914823的博客
11-14 4966
先上一个简单的路由配置，和vue2 还是有区别 import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', redirect: '/login' }, { path: '/login', name: 'login', component: () => import('../views/login/index.vue'), }, { path
vue项目使用beforeEach钩子给url添加公共参数
aydongzhiping的博客
08-22 1046
vuerouter钩子实现每个url中都带设定的参数
vueRouter-路由的三种守卫
weixin_43390711的博客
06-04 2957
一、全局守卫（进入任何一个路由都会执行） beforeEach：进入路由前执行 beforeResolve： afterEach（这个的回调参数没有next）：导航完成时执行 const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) router.beforEach((to,from,next)=>{ ... //to是将要进去的路由，from是正要离
【实战】16.Vue Router 入门
超逸の学习技术博客
03-25 308
本章中，我们学习了 Vue Router 路由管理的基础知识，并且利用已学知识，解释了用脚手架搭建的初始路由，最后我们改造了路由配置，为实战页面路由安排做准备。
vue路由守卫死循环及next原理解释
Codewarning
04-22 5825
​ 在使用vue路由守卫的beforeEach方法时可能会出现无限递归，也就是死循环的问题，根本原因在于next()方法在不合适的地方错误调用所致，先来看一下官方对next()方法的解释： beforeEach方法体： router.beforeEach((to, from, next) => { // ... }) 经过我的测试了一些数据,大概猜测出next()方法的底层实现逻辑(别问为什么不看源码,不会ts,我搞后端的) 经过我的测试,实际上,next()方法的调用是个递归的过程 以下用粗
路由的导航守卫 以及路由守卫钩子函数里面的三个参数分别是什么
weixin_61434407的博客
12-29 990
路由的导航守卫 分为全局守卫、组件级守卫、和单个页面独享的守卫 全局守卫 路由的前置守卫 router.beforeEach((to,from,next)=>{ * to -- 去哪里 * from -- 从哪里来 * next -- 下一步 （放不放行） * * }) 后置钩子函数 注意：后置钩子函数里面没有next 后置钩子函数 router.afterEach((to,from)=>{ * * }) 组件级
路由守卫的参数to,from,next是什么？怎么用？
TangMonk的博客
09-15 1886
的信息，如路径、参数、查询参数等。你可以使用这个参数来检查用户试图访问的目标路由，并基于这些信息决定是否允许访问。包含了有关当前路由的信息，如路径、参数、查询参数等。你可以使用这个参数来执行一些操作，例如记录用户从哪个路由来。可以接受一个参数，它可以是一个字符串，也可以是一个路由对象，用于指定用户应该导航到哪个路由。来告诉 Vue Router 是否允许用户进入目标路由，以及在何种情况下允许。比如：全局前置守卫做登录验证。
关于路由守卫next()
MR.杜的博客
05-19 2640
动态注册的路由，对当次路由跳转不可见，后面的路由跳转都可见 next():放行当前路由跳转 => 看不见刚才动态注册的权限路由（vue-element-admin潘家陈后台项目模板做路由权限，动态店家路由会出现页面留白bug） next(to.path) : 强制重新跳转到目标路由（中断当前路由跳转，进行新的一次跳转） //路由全局前置守卫 router.beforeEach(async(to, from, next) => { NProgress.start() do.
VUE 路由守卫 next() / next({ ...to, replace: true }) / next(‘/‘) 说明
weixin_37877794的博客
09-04 1799
https://blog.csdn.net/qq_41912398/article/details/109231418 next() —— 放行 next(’/’) —— 中断当前导航，执行新的导航。注意这里不是直接转跳，而是中断。 beforeEach((to, from, next) => { beforeEach(('/logon', from, next) => { beforeEach(('/logon', from, next) => { beforeE
路由守卫1
qq_35744728的博客
05-04 948
什么是路由呢？ 路由其实是一种映射关系。 生活中的路由：设备和ip的映射关系； node.js路由：接口和服务的 映射关系； （前端）Vue中的路由：路径和组件的映射关系。 路由守卫的使用场景？ 首先，如何给路由添加一个权限判断呢？例如，用户在登录的状态下就能去到某页面，但是未登录则给你弹出一个未登录的提示。 路由守卫的目标是实现这样一个权限判断，在路由跳转之前，会触发一个函数. //语法：router.beforeEach((to,from,next) => {} let isL.
在路由守卫中使用next(...to)的原理
最新发布
weixin_55493330的博客
04-26 870
方法的参数来控制路由导航的行为，包括放行、重定向、取消导航以及异步处理。方法可以接受不同的参数来控制路由导航的行为。守卫中，由于此时组件尚未加载，无法直接使用。方法的参数决定路由守卫的行为。综上所述，通过在路由守卫中使用。的方式来控制导航行为。
Vue 08 路由使用、注意点 多级路由 query、params参数 props配置 replace属性 编程式、缓存路由 新钩子 前置、后置、独享、组件内路由守卫 history、hash模式
weixin_58562753的博客
03-19 760
Vue 08 路由的简介、基本使用、注意点 嵌套路由 路由的query参数 命名路由 路由的params参数 router-link的replace属性 编程式路由导航 缓存路由组件 全局前置路由守卫 全局后置路由守卫 独享路由守卫 组件内路由守卫 history模式与hash模式
vue-router
08-27
import VueRouter from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值