路由的概念
- 后端路由：根据不同URL地址，服务端响应不同的资源。
- 前端路由：针对于单页面应用来说，根据不同的地址，展示不同的界面，称之为前端路由。
怎么使用路由
- 引入路由的js
- 创建路由实例。 new VueRouter
- 配置地址和组件的映射关系。 routes
- 把路由实例挂载到vue上。 Vue实例上有个router属性
- 指定路由到这个地址之后，组件显示的位置<router-view></router-view>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--
1. 引入路由脚本，路由的脚本要放在vue脚本的后面
-->
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<template id="login">
<div>
登录组件
</div>
</template>
<script>
const login = {
template: "#login"
}
</script>
<template id="register">
<div>
注册组件
</div>
</template>
<script>
const register = {
template: "#register"
}
</script>
<div id='app'>
路由测试
<!-- 5. 在界面上预留一个路由组件渲染的位置 -->
<router-view></router-view>
</div>
<script>
// 2. 创建路由的实例
const router = new VueRouter({
// 3. 配置组件和地址的映射关系
routes: [
{
path: "/login",
component: login
},
{
path: "/register",
component: register
}
]
})
const vm = new Vue({
el: '#app',
data: {
},
methods: {
},
// 4. 建立路由实例和vue实例的关系。 把路由挂载到vue实例上
router
})
</script>
</body>
</html>
路由重定向
redirect
const router = new VueRouter({ // 3. 配置组件和地址的映射关系 routes: [ { path: '/', // 把当前地址，重定向指定地址 redirect: "/login" }, { path: "/login", component: login }, { path: "/register", component: register } ] })
路由的跳转
通过router-link设置跳转
- to： 即将跳转的地址
- tag： 渲染的标签
跳转传参
query参数：
如何传递
通过？拼接参数，多个参数用 &连接
如果获取这个参数
this.$route.query.参数名
params参数（url地址参数）
先定义在使用
// 使用params传参的化，首先要定义参数 const router = new VueRouter({ routes: [ { path: '/', redirect: "/list" }, { path: "/list", component: list }, { // 定义了id和name两个参数 path: "/detail/:id/:name", component: detail } ] })
如何传参
url的指定位置，放置这些参数
/detail/10/名字
这个“10”就作为id
这个“名字”就作为name
如何获取这个参数
this.$route.params.参数名
区别
-
- params必传，query不传也可以跳转
- params使用前要先声明，query可以直接使用
- params是通过this.$route.params获取，query通过this.$route.query获取的
路由跳转进阶
可以通过对象进行跳转
对象中有以下属性
-
- path： 跳转的地址
- name： 路由的名字
- params： url参数
- query： query参数（？后面拼接的参数）
<router-link :to="{path:'/detail',query:{id:item.id,name:item.name}}" tag="li" v-for="item in list" :key="item.id"> {{item.name}} </router-link>
// 通过name进行跳转 <router-link :to="{name:'detail',params:{id:item.id,name:item.name}}" tag="li" v-for="item in list" :key="item.id"> {{item.name}} </router-link> const router = new VueRouter({ routes: [ { path: '/', redirect: "/list" }, { path: "/list", component: list }, { path: "/detail/:id/:name", component: detail, // 声明了name name: "detail" } ] })
路由的函数式跳转
当我们需要进行一些业务逻辑之后再跳转的时候，就可以用到函数式跳转
this.$router可以进行函数式跳转
-
- this.$router.push() 跳转到指定页面
- this.$router.replace() 这个会替换掉当前界面，当前界面就会从页面栈里被移除
- this.$router.back() 返回上一级
- this.$router.go() 跳转到指定的界面
路由的嵌套写法
对于我们的项目来说，我们大多数情况下，会有一些界面元素是所有界面都包含的，这个时候如果我们在每个界面都写这些元素是很麻烦的，也不利于维护，这个时候，我们就可以把这些页面抽象层界面布局。我们界面布局通过路由嵌套来实现的。
如何定义
在配置路由的时候通过children这个属性配置当前路由的子路由
const router = new VueRouter({ rotues:[ { path:"/index", component:indexLayout, // 指定indexLayout的子路由 children:[ { // 不加/代表相对路径，完整路径会拼上父路由的路径 /index/list path:"list", // 这个组件会被渲染在父路由对应的组件的<router-view></router-view>的位置 component:list } ] } ] })
- 怎么访问到它
- 访问到 它之后，它被放在哪里了
命名路由
默认情况下一个地址只能对应一个组件，但是有时候可以需要一个地址对应多个组件，这个时候就要用到命名路由
- component改成components
- components对应的是一个对象
- key是路由的名字
- value是路由对应的组件
- 设置routerView的时候，可以给routerView指定名字了
- <router-view name=""></rouer-view>
激活路由的样式
- 被匹配到的路由的router-link上会有个router-link-active的样式，我们通过设置这个样式设置激活标签的样式
- 被完全匹配到的路由的router-link上会有router-link-exact-active的样式。
- 指定成特殊的样式
- 在实例化路由的时候配置
- linkActiveClass
- linkExactActiveClass
路由的元数据
可以给路由设置一些元数据的属性，当我们跳转到这个路由的时候就可以通过$route.meta拿到这些数据
如何设置
const router = new VueRouter({ routes:[ { path:"地址", component:组件, meta:{ 元数据 } } ] })
怎么获取
this.$route.meta