Vue-router 学习（动态路由，参数传递，路由嵌套，路由懒加载，导航守卫，keep-alive）

最新推荐文章于 2024-07-02 10:45:26 发布

Pop–

最新推荐文章于 2024-07-02 10:45:26 发布

阅读量518

点赞数 1

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45026839/article/details/119759933

版权

Vue.js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

.vue 文件大写 Home.vue
name: ‘Home’ 与之对应
懒加载也大写 const Home
component : Home 也大写
只有path：’/home’ 小写

运行指令为： npm run dev

一、前端路由的核心

改变URL，但是页面不进行整体的刷新
vue-router 基于路由和组件的
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用

二、前端路由的基本使用

使用vue-router的步骤:

第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系
第三步: 使用路由: 通过<router-link>和<router-view>
router-link 在App.vue 里面使用
该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签
tag: tag可以指定<router-link>之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是<a>
```
<router-link to='/home' tag='li'>
```
replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中

active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称
router-view 占位在App.vue 里面使用
该标签会根据当前的路径, 动态渲染出不同的组件

在路由切换时, 切换的是挂载的组件, 其他内容不会发生改变

三、相关细节处理

默认路径

  {
    // 设置默认路径
    path: "",
    redirect: "home"
  },

HTML5的History模式

默认情况下, 路径的改变使用的URL的hash 带有 ‘’#“号
在router实例里面修改： mode: "history"

	//  创建路由实例对象
const router = new Router({
  routes,
  // 将地址栏上的 # 去掉 默认情况是 hash 模式
  mode: "history"
});

改变URL ，但是页面不刷新的几种方法：
1. location.hash
2. HTML5的history模式：history.pushState()
3. HTML5的history模式：history.replaceState() 不可以返回
4. HTML5的history模式:
  
  history.back() 等价于 history.go(-1)
  history.forward() 则等价于 history.go(1)
路由代码跳转
1. 上面用的是一种跳转方式
  
  有时候，页面的跳转可能需要执行对应的JavaScript代码
```
 this.$router.push('/home').catch(err=>{err})
  
  Vue-router 给所有组件加了一个 $router 属性
```

四、动态路由

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：

/user/aaaa或/user/bbbb
除了有前面的/user之外，后面还跟上了用户的ID
这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式

使用 $route.params 使用 v-bind 绑定属性

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

 {

   path: "/user/:userID",

   name: "user",

   component: User

  }

$route为当前router跳转对象里面可以获取name、path、query、params等
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
使用 props 将组件和路由解耦

五、Vue-router 路由懒加载

路由懒加载的作用

路由懒加载的主要作用就是：将路由对应的组件打包成一个个的js代码块只有在这个路由被访问到的时候, 才加载对应的组件

懒加载的方式

 const Home = () => import('../components/Home.vue')
采用 es6 的方法 简洁

六、Vue-router 嵌套路由

什么是嵌套路由

比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件

实现嵌套路由的步骤

创建对应的子组件, 并且在路由映射中配置对应的子路由 children.
在你需要嵌套的组件内部使用标签

例如你想要在home组件内嵌套俩个路由，那么在home组件里要使用标签
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

index.js 配置对应的子路由
在这里插入图片描述 5. 父路由组件里面代码书写：
6. 也可以添加跳转的<router-link>

const router = new VueRouter({
		  routes: [
		    {
		      path: '/user/:id',
		      component: User,
		      children: [
		        // 当 /user/:id 匹配成功，
		        // UserHome 会被渲染在 User 的 <router-view> 中
		        { path: '', component: UserHome }
		
		        // ...其他子路由
		      ]
		    }
		  ]
		})

简述嵌套路由的过程

先创建三个组件（parent，children1，children2，均为.vue 文件）

在router 文件夹下的 index.js routes 配置相关路由，其中在需要嵌套的地方添加children 属性

 {path:'/parent',component:parent} 
		
		{path:'parent',component:parent,
		children:[{ path:'children1',component:Children },{ 			   path:'children1',component:Children },]
		}

添加完路由组件映射关系后，去parent.vue 里面使用该俩路由

 <router-link to="/parent/children1">子路由1</router-link>

  <router-link to="/parent/children2">子路由2</router-link>

  <router-view></router-view>

嵌套默认路径显示

 {
    path: "",
   redirect: "childen1"
   }

七、Vue-router 传递参数

简述一下传参的流程：

传参传参是谁给谁传？
App.vue 传递参数给改变路由后的组件传：比如我从首页跳到个人首页传递相应的信息给个人。

传参传参怎么传？
传参有俩个参数类型 params 和 query,App.vue 根据这个传

组件如何接收由其他组件传来的值？
通过 $r o u t e . p a r a m s () 和$ route.query() 方法

那你怎么知道是给你传的？
设置路由映射关系 path: /router/:id

大致就为：在组件1跳转到组件2时，组件2需要一些参数，这些参数由组件1传递（组件1一般就为App.vue组件），组件1写好需要传递的东西后，组件2再写接收参数的代码。
需要注意组件1跳转传参时需要指明path(及向谁传递参数)

传递参数的类型
1. params的类型:
  
  配置路由格式：path: /router/:id
  
  传递的方式: 在path后面跟上对应的值（在router-link里面设置对应id的值）
  
  传递后形成的路径: /router/123, /router/abc
2. query的类型
  
  配置路由格式: /router, 也就是普通配置
  
  传递的方式: 对象中使用query的key作为传递方式
  
  传递后形成的路径: /router?id=123, /router?id=abc

传递参数的方式

<router-link> App.vue 设置

 <router-link :to="{path: '/profile/'+123,

在profile 组件中接收参数 并显示到页面上

<span>param类型:{{$route.params.id}}</span>
<span>query类型:{{$route.query}}</span>

JavaScript 代码传参 App.vue 写

 <button @click="toProfile">个人档案</button>

toProfile(){

   // 使用 $router.push()

   this.$router.push({

    path: '/profile/' + 456,

   query:{name:'戴书成',age:'18'}

   })
  }
  
 在profile 组件中接收参数 并显示到页面上
<span>param类型:{{$route.params.id}}</span>
<span>query类型:{{$route.query}}</span>

获取参数通过 $route
$route.params

$route.query

八、Vue-router 导航守卫（改变网页的标题）

使用场景：在一个SPA应用中, 改变网页的标题

什么是导航守卫

vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.

vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发
普通修改方式

我们比较容易想到的修改标题的位置是每一个路由对应的组件.vue文件中

比如在home.vue组件里面添加created 函数
```
// 创建组件之后回调,这里可以设置组件的标题

 created() {

  document.title='首页'

 }
```
注：但是当页面比较多时, 这种方式不容易维护(因为需要在多个页面执行类似的代码).

导航守卫的使用（使用hook钩子，beforeEach全局守卫前置钩子）

首先在router–> index.js --> routes --> 在组件路由的映射关系中加上 meta 属性设置标题
```
 {
path: "/home",
component: home,
meta: {
  title: "首页"
}
```

在 index.js 里面使用导航守卫这里的beforeEach 为全局前置导航守卫

router.beforeEach((to, from, next) => {
 // to: 即将要进入的目标的路由对象.
 // from: 当前导航即将要离开的路由对象.
 // next: 调用该方法后, 才能进入下一个钩子

 window.document.title = to.meta.title;
 next();
});

九、keep-alive

什么是keep-alive?

Vue内置的一个组件，主要用于保留组件状态或避免重新渲染

它自身不会渲染一个DOM元素，也不会出现在父组件链中

需要嵌套一个 router-view 来占位
用法
当组件在内被切换时，它的 mounted 和 unmounted 生命周期钩子不会被调用，取而代之的是 activated（激活）和 deactivated（注销）
keep-alive 组件的俩个属性

include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

Pop–

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-router 学习（动态路由，参数传递，路由嵌套，路由懒加载，导航守卫，keep-alive）

.vue 文件大写 Home.vuename: ‘Home’ 与之对应懒加载也大写 const Homecomponent : Home 也大写只有path：’/home’ 小写运行指令为： npm run dev一、前端路由的核心改变URL，但是页面不进行整体的刷新vue-router 基于路由和组件的vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用二、前端路由的基本使用使用vue-router的步骤:第一步: .
复制链接

扫一扫

专栏目录