1.路由
1.1 定义
路由(Routing):通过网络把源地址的信息传递的目的地址的活动
这句话怎么理解呢?
举一个我们生活中的例子:路由器
路由器提供了两种机制:路由和转发
路由是决定数据包从来源到目的地的路径
转发是将数据从输入端转移到合适的输出端
1.2 前端路由规则
- URL的hash
URL的hash,也就是锚点(#),本质上是改变windows.location的href属性,我们可以直接通过location.hash来改变href,但是页面不刷新。
![dafa8c23f548e9517ea70acf4affe50b.png](https://i-blog.csdnimg.cn/blog_migrate/0da16a43796582bcc5761a796dc333d9.jpeg)
2. **HTML5的history模式**
a: pushState()
![7dabc7d3f722592a65d687dc8ab3c7eb.png](https://i-blog.csdnimg.cn/blog_migrate/75942db1c478c8bfc38781201d8add50.png)
b: relaceState()
c: go()
2. vue-router使用
vue-router是基于路由和组件的
路由用于设定访问路径,将路径和组件映射起来
在vue-router的单页面应用中,页面的路径的改变就是组件的切换
2.1 基础使用
安装vue-router
npm install vue-router --save
使用vue-router的步骤:
- 导入路由对象,并在Vue中注册路由(Vue.use(VueRouter))
import Vue from 'vue';
import VueRouter from "vue-router";
Vue.use(VueRouter);
- 创建路由实例,并且传入路由映射配置
import Vue from 'vue';
import VueRouter from "vue-router";
import Home from "../components/Home";
import About from "../components/About";
Vue.use(VueRouter);
const routes = [
{
path:'/home',
component: Home
},
{
path: '/about',
component: About
}
]
const router = new VueRouter({
routes
})
export default router;
- 在Vue实例中挂载创建的路由实例
import Vue from 'vue'
import App from './App'
import router from "./router";
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
});
- 使用路由:通过 和
<div id="app">
<h2>我是最上面</h2>
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<h2>我是最下面</h2>
<router-view></router-view>
</div>
效果:
![8ef7c4ff5939f810a92fa1ccc8a125a0.png](https://i-blog.csdnimg.cn/blog_migrate/9fc2a1e14a485f5a70c9002416c8395f.png)
2.2 路由的默认路径
const routes = [
//将根路径重定向到/home路径下
{
path: '/',
redirect: '/home'
}
2.3 HTML5的history模式
默认情况下,路由的改变是使用URL的history模式,我们可以通过如下配置改为history模式。
![3cbe0a7b40ccc5968d664cb650e31bd9.png](https://i-blog.csdnimg.cn/blog_migrate/f0f150b5739519dccf9c1f4a9ae9d41f.png)
2.4 router-link的其他属性
- to: 用于指定跳转的路径;
- tag:可以指定
<router-link>
之后渲染成什么组件, 比如上面的代码会被渲染成一个元素, 而不是; - replace:replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中;
- active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称
![5a796e15c38b9033c36b727db5f10c5e.png](https://i-blog.csdnimg.cn/blog_migrate/9eff4053e7e7e35721588856ad457d6a.png)
2.5 路由代码跳转
有时候页面的跳转需要执行某些js代码,此时,就需要另外一种跳转方式了
<template>
<div id="app">
<h2>我是最上面</h2>
<button @click="linkToHome">首页</button>
<button @click="linkToAbout">关于</button>
<h2>我是最下面</h2>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
methods:{
linkToHome() {
this.$router.push('/home');
},
linkToAbout() {
this.$router.push('/about');
}
}
}
2.6 动态路由
某些情况下,一个页面的路径可能是不确定的,比如我们进入用户界面是,希望的路径是:/user/123,/user/44
这种类型除了前面有固定的路径,后面还跟了参数,这种path和component的匹配关系,我们称之为动态路由。
路由配置:
{
path:'/user/:id',
component: User
}
组件配置:
<template>
<div>
<h2>{{$route.params.id}}</h2>
</div>
</template>
<script>
export default {
name: "User"
}
</script>
<style scoped>
</style>
使用:
<router-link to="/user/123">用户</router-link>
<router-view></router-view>