Vue-router的基本使用
vue-router的定义
-
这里的路由并不是我们平时所说的硬件路由器,这里的路由就是单页面应用^ ① 的路径管理器
-
vue-router是Vue.js官方提供的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。
-
vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径与组件映射起来。
-
传统的页面应用,使用一些超链接实现页面切换和跳转。在vue-router单页面应用中则是路径之间的切换,也就是组件的切换
-
路由模块的本质就是建立起url和页面之间的映射关系
vue-router的使用方式
- npm安装
npm i vue-router -S
- 在vouter文件夹下新建一个index.js文件并导入路由对象
- 调用Vue.use(VueRouter)
- 创建路由实例,并传入路由映射配置
- 在Vue实例中挂载创建的路由实例
- 在app.vue中留坑
<router-view></router-view>
- 安装路由插件,配置路有关系
// index.js
// 导入路由对象
import Vue from 'vue';
import VueRouter from 'vue-router';
// 主体
import About from './components/About.vue';
import Home from './components/Home.vue';
// 安装插件
Vue.use(VueRouter);
// 创建路由对象并配置路由规则
let router = new VueRouter({
// 配置路由映射关系
routes: [
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
}
]
});
- 在Vue实例中挂载路由对象
new Vue({
el: '#app',
// 在Vue实例中挂载创建的路由实例
router: router, // 可以简写为router
render: c => c(App),
})
- 在app.vue中留坑
//app.vue中
<template>
<div>
<!-- 留坑,非常重要 -->
<!-- router-view标签会根据当前的路径,动态渲染出不同的组件 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return {}
}
}
</script>
通过路由模块来实现页面跳转
-
方式1:
<router-link to="路由地址"></router-link>
-
方式2:this.$router.push('路由路径')
①router-link
- router-link标签是一个vue-router中已经内置的组件,它会被渲染成一个
<a>
标签;属性to指向与路径path对应的组件
<div id="app">
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
-
对router-link其他属性的补充
①tag
- tag可以用于指定router-link被渲染成什么样式
<!-- 不再是一个<a>标签,而是被渲染成一个按钮--> <router-link to="/home" tag="button">Home</router-link>
②replace
- replace不会留下history记录,所以指定history的情况下,后退键不能返回到上一个记录
<!-- 点击不会返回上一页面--><router-link to="/home" tag="button" repalce>Home</router-link>
③active-class
- 当router-link对应的路由处于活跃状态时,浏览器会默认给该路由添加一个名为router-link-active的类,使用某些方式可以修改这个类名
- 为router-link添加active-class属性,设置活跃状态时在router对象中添加linkActiveClass类名,此种方式一般用于批量修改
<router-link to="/home" tag="button" active-class="active">Home</router-link> const router = new VueRouter({ routes, linkActiveClass: 'active'})
②this.$router.push()
- this.$router可以获取到当前的url信息,通过调用push等方法来修改路径同时可以实现路由的跳转
<button @click="homeClick">Home</button>
methods: {
homeClick() {
//调用push方法可以回退,调用replace方法不可回退
this.$router.push('/home')
// this.$router.replace('./home')
}
$router
与$route
的区别
$router
是VueRouter的一个对象,这个对象是一个全局对象,它包含了所有的路由和许多关键的对象和属性
![$router是VueRouter的一个对象](https://img-blog.csdnimg.cn/20190126152054473.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA==,size_16,color_FFFFFF,t_70)
$route
是一个跳转的路由对象,每一个路由都会有一个$route
对象,它是一个局部对象,可以获取到对应的name、path、params、query等
![通过$route可以获取到对应的name、path、params、query等](https://img-blog.csdnimg.cn/20190126152857422.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA==,size_16,color_FFFFFF,t_70)
路由路径的样式
①Hash模式
-
vue-router默认hash模式——使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载。
-
hash(#)是URL的锚点,代表的是网页中的一个位置,hash出现在URL中,但不会包含在http请求中,对后端完全没有影响。
-
每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用“后退”按钮,就可以回到上一个位置。
如:
http://www.abc.com/#/hello
②History模式
- 由于hash模式会在url中自带#,如果不想要很丑的hash,我们就可以用路由的history模式
- 在配置路由规则时,加入“mode:‘history’”,即可将路由的实现方式改变为history模式
const router = new VueRouter({
mode: 'history',
routes: [...]
})