一、路由--vue.js
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。
Vue.js 路由使用前需要载入vue-router库
二、安装
1、 直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
2、 NPM
cnpm install vue-router
三、组件-<router-link>
<router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容。 to 属性为目标地址, 即要显示的内容。
<router-link>相关属性
1、to
表示目标路由的链接。 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
2、replace
设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录。
<router-link :to="{ path: '/abc'}" replace></router-link>
3、append
设置 append 属性后,则在当前 (相对) 路径前添加其路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b
<router-link :to="{ path: 'relative/path'}" append></router-link>
4、tag
有时候想要
<router-link>
渲染成某种标签,例如<li>
。 于是我们使用tag
prop 类指定何种标签,同样它还是会监听点击,触发导航。
<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>
5、active-class
设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。
<style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
注意这里 class 使用 active-class="_active"。
四、路由配置 /router/index
1、普通路由配置
{
path: '/user', //配置的路径
name: 'user', //名称
component: () => import('xxx)
}
2、路由传参
<!--传参-->
<router-link to='.product/abc'>
在页面中获取
$route.params.id
3、404页面
<template>
<div>
<h1>404</h1>
<p>您的页面被外星人绑架了!</p>
<router-link to="/">回首页</router-link>
</div>
</template>
// 404的path为* 配置在最后面
{
path: "*",
name: "nomatch",
component: () => import('../views/NoMatch.vue')
}
五、编程式路由跳转 $router
1、前进
- $router.forward()
- $router.go(1)
2、后退
- $router.go(-1)
- $router.back()
3、切换路由
$router.push('/about')
4、替换路由
$router.replace('/about')
<template>
<div>
<button @click="$router.back()">返回</button>
<button @click="$router.go(-1)">返回1</button>
<button @click="$router.forward()">前进</button>
<button @click="$router.go(1)">前进1</button>
<!-- 指定跳转关于页面 -->
<button @click="$router.push('/about')">关于</button>
<!-- 指定跳转到关于页面,不留历史记录 -->
<button @click="$router.replace('/about')">关于-替换(不留历史记录)</button>
</div>
</template>
六、路由信息 $route
- 路由参数 params
- 查询 query
- 地址 path
- 全地址 fullPath
- 名称 name
<template>
<div>
<h1>产品页面{{$route.params.id}}</h1>
<p>查询参数:{{$route.query}}</p>
<p>哈希值:{{$route.hash}}</p>
<p>全地址:{{$route.fullPath}}</p>
<p>地址:{{$route.path}}</p>
<p>名称:{{$route.name}}</p>
<button @click='$router.back()'>返回</button>
</div>
</template>
七、路由守卫
作用:在进入离开页面前做拦截,处理事情(跳转提示,权限检查)
1、组件内部
- 进入前 beforeRouterEnter(to,from,next)
- 离开前 beforeRouterLeave
- 更新前 beforeRouterUpdate
- to要进入的路由
- from从哪个页面进入
- next下一步
- next()进入to页面
- next(true)进入to页面
- next(false)不跳转
- next("/login")跳转到登录
beforeRouteLeave(to,from,next){
// to 要去的页面
// from 从哪个页面离开
// next下一步(必须要执行)
var flag = window.confirm("亲,商品价格是本年度最低价格,确定也放弃优惠吗?");
if(flag){
next();//进入下一页面
}else{
next(false);//不离开
}
}
2、全局守卫
//写在路由配置中
//希望好几个页面都需要验证是否登录
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
//如果需要全限,判断
if (localStorage.getItem("token")) {
//如果没有token放行
next(true);
} else {
//跳转到登录页面添加redirect
next('/login?redirect' + to.path)
}
} else {
//直接放行
next(true);
}
})
router.afterEach((to, from) => {
console.log(from, '离开前')
})
八、路由元信息
{path:path,name,component,
meta:{noFooter:true}
}
$route.meta.noFooter范围
九、路由查询参数
1、传递
next("/login?redirect=/cart")
2、获取
var redirect=this.$route.query.redirect||'/use