vue的路由使用在SPA应用中的组件跳转，相当于多页面的 a标签。官网
引入js文件的方式
引入vue-router.js文件
<script src="js/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
定义若干个组件(为了跳转用)
let goodlist = {
template:"<div>商品列表</div>"
}
let goodsdetail = {
template:"<div>商品详情</div>"
}
定义路由对象
1 路由配置（json数组）
let routes = [
{path:'/goodslist',component:goodlist},
{path:'/goodsdetail',component:goodsdetail}
];
2 实例化一个vueRouter对象
let router = new VueRouter({
routes
});
挂载vueRouter对象
实例化vue对象，（把vueRouter对象，挂载（注册）到vue对象里）
let vm = new Vue({
el:"#app",
router
});
跳转代码（声明式）
<div id="app">
<h1>路由跳转</h1>
<hr/>
<router-link to='/goodslist'>商品列表</router-link>
<router-link to='/goodsdetail'>商品详情</router-link>
<hr/>
<router-view></router-view>
</div>
解释：
- ==<router-link></router-link>: 超链， 相当于标签a 。==
- ==<router-view></router-view>: 组件显示的位置。==
模块化的方式（脚手架里）
脚手架安装时，会默认安装vue-router。
安装
npm i vue-router -S
定义组件（单文件组件）
如：HelloWorld.vue
路由配置和引入
创建vueRouter对象（定义路由对象，配置路由）
// src/router/index.js
import Vue from 'vue'
//1. 引入路由包
import Router from 'vue-router'
//2. 安装插件包到Vue上, 使用
Vue.use(Router)
//3. 路由配置
let routes = [
{path: '/', component: HelloWorld}
{path: '/home',component: Home}, //route 一条路由的配置
]
//4.路由实例
let router = new Router({ //插件路由对象
// routes:routes
routes,
});
//5.导出路由实例，让它去控制vue根
export default router
在main.js中引入vueRouter对象，并植入到根属性**
// src/main.js
import router from './router/index';
new Vue({
el: '#app',
router,
………………
})
跳转
声明式跳转
<router-link to="/home">声明式跳转</router-link>
<router-link to="/home" tag='li' active-class='类名' >声明式跳转</router-link>
<router-view>展示区</router-view>
router-link 组件属性:
- to:跳转的路径
- tag='li' 指定编译后的标签，默认是 a 标签。
- active-class='类名' 指定激活后的样式 模糊匹配
- exact-active-class='类名' 指定激活后的样式 严格匹配
- router-link和router-view组件是vue-router插件提供的
编程式跳转（编程式导航）
先了解
route
-
$router：表示vueRouter对象，由于我们在vue对象里把vueRouter对象植入到根属性里，所以，在组件内部是可以使用$router拿到该对象的。 -
$route：表示匹配到的当前路由，可以简单粗暴的理解为，路由配置中的某个json对象。当然，这个对象里的信息比路由配置的更多。
编程式导航
- this.$router.push(字符串/对象)： 添加一个路由 （记录到历史记录)
// 字符串
$router.push('home')
// 对象
$router.push({ path: 'home' })
- this.$router.replace({name:'...'}) //替换一个路由 （不记录到历史记录)
- this.$router.go(-1|1)|back() //回退/前进
动态路由匹配
1、路由参数
路由配置
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头，相当于在path里声明了一个变量 id
{ path: '/user/:id', component: User }
]
})
跳转
//匹配上 '/user/:id' 路径，01001的值会赋给id
<router-link to="/user/01001">用户01001的信息</router-link>
组件中获取id的值
模板里的写法：
$route.params.id
脚本里的写法:
this.$route.params.id
2、捕获所有路由或 404 Not found 路由
1)、通配符 *
'*' 会匹配所有路径
'/user-*' 会匹配以 `/user-` 开头的任意路径
注意：路由匹配的顺序是按照路由配置的顺序进行的，所以，你肯定不能把 * 的路径放在最前面，否则，后面的路由配置都不起作用了。
当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分。
如：
路由配置：
{
// 会匹配以 `/user-` 开头的任意路径
path: '/user-*'
}
路由跳转：
this.$router.push('/user-admin')
组件里：
this.$route.params.pathMatch // 'admin'
404
{
path: '*',
component: NoPage组件
}
命名路由
给路由起个名字，就可以使用名字来指定路由
1、路由配置
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
2、跳转
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
重定向
{
path: '/', //默认页
redirect: '/home' //配置型跳转
},
总结：路由传参：
一、params
1、传：
1）、动态路由匹配（路由配置里写）
{ path: '/user/:id', component: User }
2）、跳转时传参
1)、跳转时，使用字符串
//声明式
<router-link to="/user/01001">用户01001的信息</router-link>
//编程式
$router.push("/user/01001");
2）、跳转时，使用对象
//声明式： 命名的路由，同时传参
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
//编程式：
$router.push({ name: 'user', params: { userId: '123' }})
2、接：
//模板里的写法：
$route.params.参数名
//脚本里的写法:
this.$route.params.参数名
二、query
1、传：
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
注意：如果提供了 path，那么params 会被忽略
name 对应params
path对应query
2、接
//模板里的写法：
$route.query.参数名
//脚本里的写法:
this.$route.query.参数名
路由传参和props
一个组件在项目中，有两种使用方式（组件显示在浏览器上）：
1、自定义标签的方式，外部给组件传数据，用props
2、使用路由跳转的方式，外部给组件传数据，用params或者query。
如果， 一个组件需要从外部传入数据， 并且在项目中，这两种方式的使用都会出现，那么，在组件内部就需要适应这两种情况。
如何使用 props 将组件和路由解耦：
props 被设置为 true，route.params 将会被设置为组件属性。
路由配置：
{ path: '/user/:id', component: User, props: true },
组件：
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
嵌套路由
子路由嵌套
// src/router/index.js
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile //子组件UserProfile显示在父组件User里的<router-view>
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts//子组件UserPosts显示在父组件User里的<router-view>
}
]
}
]
})
lizi
//index.js
import Myshoucang from '@/components/Myshoucang'
import Shangpinshoucang from '@/components/shoucang/Shangpinshoucang'
import Dianpushoucang from '@/components/shoucang/Dianpushoucang'
{
//收藏
path: '/Myshoucang',
name: 'Myshoucang',
component: Myshoucang,
children: [{
path: '/Shangpinshoucang',
component: Shangpinshoucang
},
{
path: '/Dianpushoucang',
component: Dianpushoucang
}
]
},
//Myshoucang.vue
<script>
export default {
name:'hmyid',
methods:{
shangpinshoucang(){
this.$router.push("/Shangpinshoucang");
},
dianpushoucang(){
this.$router.push("/Dianpushoucang");
},
}
};
</script>
后台管理系统里，经常要使用子路由嵌套
路由模式
路由模式分为两种：hash和history。
区别（面试题）：
1）、外观上
- hash模式时，路径上有#。
- history模式时，路径上没有#
2）、hash模式不会给后端发请求
history模式会给后端发请求，需要后端配合。要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。否则，就会返回404。如果后端有同名的url，那么就会找后端的url。
// src/router/index.js
let router = new VueRouter({ //插件路由对象
routes,
// mode:'hash'//哈希模式 location.href
mode:'history'//历史记录 history.pushState
});
网友评论