动态组件和v-if组件的缺点:
- 切换组件后没有url没有变化,是个单页面。
- 父子组件传值繁琐
这两问题可以被vue-router插件解决。
官网文档: 安装 | Vue Router
但是vue-router的缺点如下:
- 第一次加载慢
- 不适合做seo索引的页面,如公司宣传
安装:
方法一: 使用npm方式下载添加到运行时候的依赖
npm install vue-router --save
方法二: 在使用vue-cli创建项目的时候,勾选上Router
使用:
- 引入插件
- 告诉vue要使用router插件
- 创建vueRouter实例
- 告诉vue实例要使用的vueRouter实例
// main.js入口文件相关配置
import vueRouter from 'vue-router'
Vue.use(vueRouter)
const router = new vueRouter({
})
new Vue({
render: h => h(App),
router,
// 使用该vue-router
}).$mount('#app')
配置vueRouter实例
我们先创建两个间的的组件,home和user。
在实例中配置路由功能routes: 如果url匹配上path的值,则切换到component组件中。
// 使用了模块化,把router分出来做了一个单独的文件router.js
// 在main.js中使用import引入该文件即可使用
import Vue from 'vue'
import vueRouter from 'vue-router'
import Home from './components/home'
import User from './components/user'
Vue.use(vueRouter)
export default new vueRouter({
// 配置路由功能
routes: [
{path: "/", component: Home},
// 遇上/加载home组件
{path: "/user", component: User}
// 遇上/user 加载user组件
],
mode: "history"
// hash模式和history模式
})
使用router-view标签来做组件切换的位置
<!-- App.vue文件 -->
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h1>Routing</h1>
<router-view></router-view>
<!-- 切换路由的部分 -->
</div>
</div>
</div>
</template>
![657196ba42148fdebbdb22a4784cb552.gif](https://img-blog.csdnimg.cn/img_convert/657196ba42148fdebbdb22a4784cb552.gif)
模式:
hash模式:
- 在url后面会多一个#
- 在url后面无论再输入什么值也不会跟后台请求数据
![c986a0f74283becc29b9d647e1470376.png](https://img-blog.csdnimg.cn/img_convert/c986a0f74283becc29b9d647e1470376.png)
history模式:
- 简洁
- 在url后面输入东西,会跟后台请求,如果不存在则404
![7ac2b78f896d94ee302ce5a02e6a09b1.png](https://img-blog.csdnimg.cn/img_convert/7ac2b78f896d94ee302ce5a02e6a09b1.png)
小结: 如果使用history模式,请求到不正确的url,使用404不好看的话,告诉后台返回index.html或者什么都不做即可。
后台配置:
HTML5 History 模式 | Vue Router
router-link标签
我们先写一个header.vue组件,然用户点击home则跳转到home组件,点击user则跳转到user组件。再把这个组件引入到App.vue文件中。
<template>
<div>
<ul class="nav nav-pills">
<li><a href="/">HOME</a></li>
<li><a href="/user">USER</a></li>
</ul>
</div>
</template>
<style scoped>
.router-link-active {
color: #d9b611;
}
</style>
![7ea1044c37b7628f849de58daed5f44a.gif](https://img-blog.csdnimg.cn/img_convert/7ea1044c37b7628f849de58daed5f44a.gif)
但是我们发现a标签有一个默认跳转行为,处理起来有点麻烦。
我们可以使用router-link来代替a标签。
<li><router-link to="/" exact>Home</router-link></li>
<li><router-link to="/user">User</router-link></li>
<!-- router-link默认是a标签 -->
![0f314cd6f70ca2e335a6256d7cd5e089.gif](https://img-blog.csdnimg.cn/img_convert/0f314cd6f70ca2e335a6256d7cd5e089.gif)
router-link直接就切换了,没有跳转行为。并且被选中的时候有一个.router-link-active的class
router-link中的exact属性:
.router-link-active的class默认是模糊匹配,两个标签中都包含"/",两个标签都可以匹配到class,如果只想要一个就使用exact。
![df82dfec667e17563a2addb3334e15f9.gif](https://img-blog.csdnimg.cn/img_convert/df82dfec667e17563a2addb3334e15f9.gif)
![b9060677aa12975f187b3ef8a241ea34.gif](https://img-blog.csdnimg.cn/img_convert/b9060677aa12975f187b3ef8a241ea34.gif)
router-link中的tag属性:
tag属性可以把router-link标签变成其他标签,这更方便写层级样式
把router-link变成li标签,然后再里面嵌套一个简单的a标签。
<router-link tag="li" active-class="active" to="/" exact><a>HOME</a></router-link>
<router-link tag="li" active-class="active" to="/user"><a>USER</a></router-link>
![0cf0db5a74a0e3be74401cb46e15f85a.png](https://img-blog.csdnimg.cn/img_convert/0cf0db5a74a0e3be74401cb46e15f85a.png)
使用Js切换组件:
思路: 由于我们已经在vue实例中引入了vue-router实例,所以可以使用已经挂载的vue-router实例。
<template>
<div>
<hr>
<p>这是user组件</p>
<button class="btn btn-primary" @click = 'goToHome'>跳转到主页</button>
</div>
</template>
<script>
export default {
methods: {
goToHome() {
this.$router.push("/")
// this.$router.push({path: "/"}) // 可以写成对象的形式
// push方法跳转路由
}
}
}
</script>
<style scoped>
</style>
![1c53a7c567f97964abad1a06f641285a.gif](https://img-blog.csdnimg.cn/img_convert/1c53a7c567f97964abad1a06f641285a.gif)