VueRouter路由

已于 2023-12-20 16:22:24 修改
阅读量482 收藏 9
点赞数 6
分类专栏： 前端学习笔记 文章标签： 智能路由器
于 2023-12-20 16:21:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RreamigOfGirls/article/details/135109856
版权

目录

一、路由的基本使用

二、多级路由

三、路由的query参数

四、命令路由

五、路由的params参数

六、路由的props配置

七、router-link的replace的属性

八、编程式路由导航

九、缓存路由组件

十、全局路由守卫

十二、组件内部路由守卫

十三、history模式和hash模式

十四、使用路由元信息(meta)设置页面标题

一、路由的基本使用

//该文件专门用于创建整个应用的路由器

import VueRouter from "vue-router";
import About from "@/components/About";
import Home from '@/components/Home';

//创建并默认暴露一个路由器
export default new VueRouter({
   routes:[
       {
           path:'/about',
           component: About
       },
       {
           path:'/home',
           component: Home
       }
   ]
});


 <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
 <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

二、多级路由

//该文件专门用于创建整个应用的路由器

import VueRouter from "vue-router";
import About from "@/pages/About";
import Home from '@/pages/Home';
import News from "@/pages/News";
import Message from "@/pages/Message";

//创建并默认暴露一个路由器
export default new VueRouter({
   routes:[
       {
           path:'/about',
           component: About
       },
       {
           path:'/home',
           component: Home,
           children:[
               {
                   path: 'news',
                   component: News
               },
               {
                   path: 'message',
                   component: Message
               }
           ]
       }
   ]
});


  <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
  <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

三、路由的query参数

<!---跳转路由并携带query参数，to的字符串写法-->
<!--<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link>&nbsp;&nbsp;-->
<!---跳转路由并携带query参数，to的对象写法-->
<router-link
  :to="{
         path:'/home/message/detail',
         query:{
         id: m.id,
         title: m.title
        }
 }">
<template>
   <ul>
     <li>消息编号:{{ $route.query.id }}</li>
     <li>消息标题:{{ $route.query.title }}</li>
   </ul>
</template>

四、命令路由

export default new VueRouter({
   routes:[
       {
           name: 'regard',
           path:'/about',
           component: About
       }]
});
<router-link
            :to="{
              // path:'/home/message/detail',
              name: 'particulars', //利用路由名字直接跳转路由简化多级路由的path配置
              query:{
                id: m.id,
                title: m.title
              }
 }">

五、路由的params参数

 <router-link
            :to="{
              // path:'/home/message/detail',
              name: 'particulars', //利用路由名字直接跳转路由简化多级路由的path配置
              //注意如果你这里使用params传递参数,不能配置path，只能配置name,一定要注意
              params: {
                id: m.id,
                title: m.title
              }
        }">
          {{ m.title }}
 </router-link>
<template>
   <ul>
     <li>消息编号:{{ $route.params.id }}</li>
     <li>消息标题:{{ $route.params.title }}</li>
   </ul>
</template>

六、路由的props配置

  {
                   path: 'message',
                   component: Message,
                   children:[
                       {
                           name: 'particulars',
                           path: 'detail/:id/:title',
                           component: Detail,
                           //props的第一种写法值为对象,该对象的所有key-value都会以props的形式传给detail组件(死数据)
                           // props:{
                           //     a:1,
                           //     b:'hello'
                           // }
                           //props的第二种写法，值为布尔值,布尔值为真，就会把该路由组件收到的所有params(注意如果是query参数不会奏效的)参数以props的形式传递给detail组件
                           // props: true
                           //props的第三种写法,值为函数  $route.query.id
                           props({ query: { id, title } }){
                               return {
                                   id,
                                   title
                               }
                           }
                       }
                   ],
               }
           ]
       }

七、router-link的replace的属性

  <router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link>

八、编程式路由导航

 methods:{
    pushShow(m){
      // console.log(this.$router); //router路由器 ==》管理 route路由(一系列key-value的规则)
      this.$router.push({
        //这里与router-link的to属性配置形式是一样的
        name: 'particulars',
        query:{
          id: m.id,
          title: m.title
        }
      })
    },
    replaceShow(m){
       this.$router.replace({
         //这里与router-link的to属性配置形式是一样的
         name: 'particulars',
         query:{
           id: m.id,
           title: m.title
         }
       })
    }
  }

九、缓存路由组件

<!--include的值代表要缓存的组件，比如下面代表在Home组件中要缓存News组件(组件名)-->
<!--如果要缓存多个路由组件就改写为:include="['News', 'Message']"-->
<keep-alive include="News">
     <router-view>
     </router-view>
</keep-alive>

十、全局路由守卫

//全局前置路由守卫
//初始化和在每一次路由切换之前被调用
router.beforeEach((to, from, next) => {
    // console.log(to, from);
    console.log('前置路由守卫');
    const { isAuth } = to.meta;
    if(isAuth){
        //代表需要鉴权
        if(localStorage.getItem('school') === 'wust1') next();//类似于nodejs中间件
        else alert('无权限');
    }else{
        next();
    }
});

//全局后置路由守卫
//初始化和在每一次路由切换之后被调用
router.afterEach(( to, from ) => {
    console.log('后置路由守卫', to, from);
    //点击每一个路由都切换西夏document.title
    const { title } = to.meta;
    document.title = title || 'vue-advance';
})

十一、独享路由守卫

 {
           name:'homepage',
           path:'/home',
           component: Home,
           meta:{
               title: '主页'
           },
           children:[
               {
                   name: 'ns',
                   path: 'news',
                   component: News,
                   //meta:路由元信息，可以配置是否需要校验的信息
                   meta:{
                       isAuth: true,
                       title: '新闻'
                   },
                   //独享路由守卫
                   beforeEnter(to,from,next){
                       const { isAuth } = to.meta;
                       if(isAuth){
                            //代表需要鉴权
                            if(localStorage.getItem('school') === 'wust1') next();//类似于nodejs中间件
                            else alert('无权限');
                        }else{
                            next();
                        }
                   }
               }

十二、组件内部路由守卫

export default {
  name: "About",
  mounted() {
    console.log('The route of About', this.$route);
  },
  //组件内路由守卫

  //与前置和后置是两码事
  //通过路由规则进入该组件时被调用,注意一定是通过路由规则进入组件，普通的组件装载是不会调用的
  beforeRouteEnter(to, from, next){
    console.log('App---beforeRouteEnter');
    console.log(from, to);
    const { isAuth } = to.meta;
    if(isAuth){
             //代表需要鉴权
      if(localStorage.getItem('school') === 'wust1') next();//类似于nodejs中间件
      else alert('无权限');
    }else{
      next();
    }
  },
  //通过路由规则离开该组件时被调用
  beforeRouteLeave(to, from, next){
    console.log('App---beforeRouteLeave');
    console.log(from, to);
    next();
  }
}
</script>

十三、history模式和hash模式

//创建一个路由器
const router = new VueRouter({
    //默认开启hash模式
    mode: 'history'
});

十四、使用路由元信息(meta)设置页面标题

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { title: '首页' } // 添加meta字段，定义标题
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: { title: '关于我们' } // 添加meta字段，定义标题
  }
]

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title + ' - 网站名称';
  } else {
    document.title = '网站名称';
  }
  next();
});

大圣归来~
关注
专栏目录
【Vue】高级系列（九）路由 - vue-router - SPA - 基本路由 - 嵌套路由 - 编程式路由导航
YK菌的博客
02-25 2992
学习Vue-router
【Vue知识点】路由router详解
m0_50785976的博客
08-05 2223
路由router详解
vue里的router跟 route
qq_42560402的博客
07-08 111
1.this.$ router 2.this.$ router.go(n)， 该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似window.history.go(n)。 this.$ router.go(1)前进一步 this.$ router.go(-1)后退一步3.this.$ router.push() 2.this.$ route this.$ route 访问当前路由 ； this.$ route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局
vue-router中useRoute, useRouter
qq_33894186的博客
08-16 263
用于获取当前路由对象的信息。它提供了关于当前活动路由的各种信息，如路径、参数、查询参数等。都是Vue Router 4中的Composition API，它们的主要区别在于用途和功能。：用于访问全局的路由器实例。它允许你在组件中执行导航操作，如跳转到其他路由、获取路由信息等。来访问当前路由的状态，并根据这些信息执行相应的操作。主要用于执行导航操作和访问全局路由器实例。主要用于获取当前路由的信息，而。
Vue中 router 和 route 的区别
weixin_63681863的博客
08-20 1682
是Vue Router库中的核心概念，它是用于管理和控制应用程序中的路由的对象。是指当前激活的路由，它是一个包含当前路由信息的对象，用于获取当前路由的相关信息。对象来获取当前路由的信息，例如获取当前路由的路径、参数等。是指当前激活的路由，它是一个包含当前路由信息的对象。是Vue Router库中的核心概念，用于管理和控制应用程序的路由。实例来配置路由规则，并将其挂载到Vue应用中。对象包含了当前路由的路径、参数、查询参数等信息，可以通过访问。是与路由相关的两个概念，它们有不同的含义和作用。
【vue】useRouter和useRoute
当白的技术小窝 ( git : https://github.com/canwhite )
06-07 2563
vue3 router
22_VueRouter路由使用.pdf
10-07
VueRouter路由使用.pdf VueRouter是Vue.js的官方路由，它与Vue.js核心深度集成，让用Vue.js构建单页应用变得非常容易。Vue Router是基于路由和组件的，路由用于设定访问路径，将路径和组件映射起来。在VueRouter的...
vue router路由嵌套不显示问题的解决方法
12-10
在Vue.js应用中，路由管理是一个关键组成部分，Vue Router作为官方推荐的路由库，提供了强大的导航控制和页面间通信功能。然而，在实际开发过程中，开发者可能会遇到路由嵌套不显示的问题，这通常与配置和模板结构...
Vue Router 路由
nnjjn的博客
03-06 577
介绍 Vue Router 是Vue.js的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。 安装 npm npm install vue-router@4 win+R输入cmd复制上面的npm CDN 链接，单击右键进行复制，然后回车 ...
vurRouterDemo:vue Router路由简单demo
04-29
一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view ...
Vue路由管理器Vue-router的使用方法详解
11-21
router-link 组件支持用户在具有路由功能的应用中点击导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名 比起写死的 会好一些。无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动；在 HTML5 history
vue中的useRouter的使用
qq_47902937的博客
07-10 1005
你可以在 Vue 3 中方便地获得 Vue Router 实例，并使用其提供的各种路由功能。请确保在正确的地方调用和使用。是 Vue Router v4 中的一个函数，它用于获取 Vue Router 的实例。函数，以确保获得正确的 Router 实例。
Vue 中 router和route的区别
FellAsleep的博客
04-13 2320
router router是VueRouter的实例对象,也是一个全局的路由对象，里面有很多的属性和方法 ，比如：router.push,route.options等等。 跳转链接就可以用 this.$router.push，和router-link跳转一样。 route route是当前正在跳转的路由对象，可以从route里面获取hash，name ，path，query，mathsr ， fullPath等属性方法 比如接受参数时使用 this.$route.query.参数名 ---- t
Vue-route核心知识整理
xiaoxie_life_study
02-19 1596
Vue-route核心知识整理：1 相关理解；2 几个注意点；3 路由的基本使用；4 嵌套 (多级) 路由；5 路由传参；6 路由的replace属性；7 路由的编程式导航；8 缓存路由组件；9 两个新的生命周期钩子；10 全局路由守卫（前置和后置路由守卫）；11独享路由守卫；12 组件内守卫；13 路由的两种工作模式
Vue2.7中使用useRouter 和useRoute
kiwxr的博客
08-28 2631
Vue2.7中使用useRouter 和useRoute
【vue-router】useRoute 和 useRouter 的区别
有来技术
12-02 3566
本文深入解析了Vue Router 4.x中的useRoute和useRouter函数，详细阐述了它们在Vue 3.2中的应用及区别。
vue中router与route的区别
做最有意义的事情，成就最有价值的梦想，展现最真实的自己 . 超越自己，改变世界 .
06-01 266
一、$route对象 $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 1. $route.path（字符串，对应当前路由的路径，总是解析为绝对路径，如"pc/shop"）。 2. $route.params（一个key/value对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。） 3. $route.query（一个key/value对象，表示URL查询参数。例如对于路径 /admin?user=...
vue3 路由新玩法useRoute 和useRouter
秋来九月八
07-27 9854
原来的vue2路由是通过this.\$route和this.\$router来控制的。现在vue3有所变化，useRoute相当于以前的this.\$route，而useRouter相当于this.\$router
vue3 userouter未解析
最新发布
09-16
Vue3 Router在初次加载时可能会遇到"unresolved"的问题，这通常是由于以下原因导致的： 1. **模块导入错误**：确保你在`.vue`文件或者全局组件中正确引入了`vue-router`。如果是按需引入，确保在需要的地方使用`import { useRouter } from 'vue-router'`。 2. **配置问题**：检查你的`router.js`配置是否正确。确保设置了路由数组，并且在Vue实例中通过`useRouter`钩子注入到原型链上，如`setup`函数中。 ```js // router/index.js const routes = ... // 路由配置 export default new VueRouter({ routes, }) ``` ```ts // App.vue 或者其他组件 import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 3. **命名视图**：如果你使用了动态路径，确保已经正确设置路由守卫（比如`beforeEach`）处理跳转和命名视图的匹配。 4. **版本兼容性**：确认你的`vue-router`版本与Vue3版本相匹配，避免因版本问题引起的冲突。 如果上述步骤都检查过还是出现问题，尝试清空浏览器缓存，或者更新相关的依赖库试试。如果还有疑问，可以在开发者工具的控制台查看详细的错误信息，以便找到具体的错误来源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值