目录
一、路由--vue.js
什么是路由？
在 Vue 中路由就是控制显示哪个页面，通过路由显示的页面是显示在 App.vue 中的，当更改 URL 后只改变 App.vue 页面中路由部分对应的内容，也就是说通过路由显示时，也是属于局部刷新效果。
注：在 App.vue 中通过 <router-view> 显示路由内容。
- 路由就是路径和组件的映射关系。
- 在一个页面里, 切换业务场景
- 单页面 SPA(single page web application) 应用
- 整个应用只有一个完整的页面
- 点击页面中的导航链接不会刷新页面 ，只会做页面的局部更新
- 数据需要通过ajax请求获取
注意点：
- 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
- 通过切换，隐藏了的路由组件，默认是被销毁掉的，需要的时候在挂载
- 每个组件都有自己的$route属性，里面存储着自己的路由信息
- 整个应用只有router，可以通过组件的**$router**属性获取到
二、路由安装
1.直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js2.npm安装vue-router,命令
npm i vue-router
3.应用插件：Vue.use(VueRouter)
三、路由配置 /router/index
1、普通路由配置
// 1.在router/index文件中配置
{
path: '/user', //配置的路径
name: 'user', //名称
component: () => import('../views/user/UserView.vue') //对应的组件
}
// 2.在App.vue文件中配置
<router-link to="/user">个人中心</router-link>
3.在 App.vue 中通过 <router-view></router-view> 显示路由内容
子路由配置
{
path: '/admin',
name: 'admin',
component: () => import("../views/admin/AdminView.vue"),
// 注册子路由
children: [
// 和普通路由一致,path前面没有 /
{ path: "dash", name: "dash", component: () => import("../views/admin/HomeView.vue") },
]
},
<router-link to="/admin/dash">跳转到子路由dash页面</router-link>2、路由传参
1、传递参数
跳转前的搜索页面(data中声名 value变量，注意此处to前要加：)
<input type="text" v-model="value" placeholder="请输入搜索关键词">
<router-link :to="'/search/' + value">搜索</router-link>
路由注册页面index.js
// 搜索结果页面 此处path上自定义/:value参数
{
path: '/search/:value',
name: 'search',
component:()=>import('../views/SearchView.vue'),
},
跳转目标页面接收参数
查看搜索value参数{{$route.params.value}}2、接收参数
{{$route.params.value}}特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
3、404页面
404页面的path为* 配置在最后面 页面查找错误默认跳转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-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>。 于是我们使用tagprop 类指定何种标签，同样它还是会监听点击，触发导航。
<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
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)
- 全局后置：router.afterEach((to, from)
- 参数与单页面参数相同（全局后置只有两个参数）
全局守卫(步骤一)
//写在路由配置中 src/router/index.js
//希望好几个页面都需要验证是否登录
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, '离开前')
})全局守卫路由设置（步骤二）
在需要设置全局守卫的组件页面添加meta对象属性
{
path: '/user', //配置的路径
name: "user", //名称
meta: {
noFooter: true, //在meta中自定义属性noFooter true
requireAuth:true
},
component: () => import('../views/user/UserView.vue') //对应的组件
},全局守卫举例：
八、路由查询参数
传递 next("/login?redirect=/cart")
获取 var redirect = this.$route.query.redirect| | '/user'
2084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
