Vue-router

最新推荐文章于 2024-09-07 16:07:08 发布

to Zero-

最新推荐文章于 2024-09-07 16:07:08 发布

阅读量196

点赞数

分类专栏： vue相关文章标签： vue-router

本文链接：https://blog.csdn.net/LEVsunshine/article/details/102860244

版权

vue相关专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue-router的使用

概念

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

路由，就是指向的意思，实际上就是指向导航栏的地址

路由中有三个基本的概念 route, routes, router。

1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容，这是一条route, about按钮 => about 内容，这是另一条路由。

2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

4，客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.

安装

npm install vue-router

配置
在src/router/index.js中

import Router from 'vue-router'

Vue.use(Router)
export default new Router({
	routes:[
		{
			path:'这里写路由地址',
			name:'页面名称',
			component:组件名称
		}
	]
})

引入
在main.js中引入

import router from './router'

new Vue({
	router
})

跳转方式

1、router-link

//<router-link>默认被渲染成一个a标签
<router-link to="页面地址"></router-link>

2、编程式导航

 this.$router.push({path:'页面路径'})

定义路由

const router = new Router({
	routes:[
		path:'/helloworld/:id',//动态路径餐数据，以冒号开头
		props:true,//可以不通过this.$route获取，直接当做组件
		name:'HelloWorld',
		component:HelloWorld,
	]
})

获取动态路由路径参数

console.log(this.$route.params.id)
console.log(this.id)

编程式导航（放到事件中）

router.push('home')  ；// 字符串

router.push({path:'home'})；  // 对象

router.push({name:'user',params:{userId:123}})；  // 命名的路由

router.push({path:'register',query:{plan:'private'}})；// 带查询参数，变成 /register?plan=private ，获取this.$route.query.plan

//注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = 123

router.push({ name: 'user', params: { userId }})；    // -> /user/123

router.push({ path: `/user/${userId}` }) ；     // -> /user/123

// 这里的 params 不生效（注意这个例子）

router.push({ path: '/user', params: { userId }}) ；   // -> /user

router.go(n) 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

    router.go(1) ； // 在浏览器记录中前进一步，等同于 history.forward( )

    router.go(-1)； // 后退一步记录，等同于 history.back( )

    router.go(3)；  // 前进 3 步记录

别名
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样

const router = new VueRouter({ 
      routes: [
         { path: '/a', component: A, alias: '/b' }
      ]})

导航守卫

“导航”表示路由正在发生改变。 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

进入路由前，先通过守卫，判断是否可以通过

全局前置守卫 router.beforeEach
每个守卫方法接收三个参数：

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function:一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next():进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false):中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在router-link 的 to prop 或 router.push 中的选项。
next(error): (2.4.0+) 如果传入next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

全局解析守卫 router.beforeResolve
跟全局前置守卫一样，接收三个参数
这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
确保要调用 next 方法

全局后置钩子 router.afterEach
不会接受 next 函数也不会改变导航本身