vue-router是Vue.js官方的路由插件,它是和Vue.js深度集成的,适用于构建单页面应用。
vue-router是基于路由和组件的。
- 路由用于设定访问路径,将路径和组件映射起来。
- 在vue-router的单页面应用中,路径的改变就是组件的切换
安装vue-router
- npm install vue-router --save
- 在src中创建router文件夹,在router文件夹下创建index.js文件,在此文件中配置路由相关信息
index.js中的内容
import Vue from 'vue'
import App from './App.vue'
//如果导入的是目录,会自动找index.js,所以后边的index.js可以不写
import router from './router'
Vue.config.productionTip = false
new Vue({
//此处挂载路由实例,可以简写
router:router,
render: h => h(App),
}).$mount('#app')
//配置路由相关信息
import VueRouter from "vue-router"
import Vue from 'vue'
//1.通过Vue.use(插件),安装插件
Vue.use(VueRouter)
//2.创建VueRoter对象
const router=new VueRouter({
//配置路由和组件之间的应用关系
routes:[
]
})
//3.将router对象传入Vue实例中
export default router
配置路由映射关系的步骤
为什么要创建路由组件,因为一个组件对应一个路径,没有路由组件就建立不了对应关系。
//2.创建VueRoter对象
const router=new VueRouter({
//配置路由和组件之间的映射关系
routes:[
//一个映射关系就是一个对象
{
path:'/home',
component:home
},
{
path:'/about',
component:about
}
]
})
<template>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
router-link是一个vue-router中已经内置的组件,它会被渲染成一个<a>标签。
路由的默认值
routes:[
//一个映射关系就是一个对象
{
path:'/',
redirect:'/home'
},
{
path:'/home',
component:home
},
{
path:'/about',
component:about
}
]
path:'/'加不加/都可以。
修改为HTML5的history模式,通过mode属性。
const router=new VueRouter({
//配置路由和组件之间的映射关系
routes:[
//一个映射关系就是一个对象
{
path:'/',
redirect:'/home'
},
{
path:'/home',
component:home
},
{
path:'/about',
component:about
}
],
mode:'history'
})
router-link的属性
- tag属性:渲染成什么标签。
<template>
<div id="app">
<router-link to="/home" tag="button">首页</router-link>
<router-link to="/about" tag="button">关于</router-link>
<router-view></router-view>
</div>
</template>
- replace属性:不能返回
<template>
<div id="app">
<router-link to="/home" tag="button" replace>首页</router-link>
<router-link to="/about" tag="button" replace>关于</router-link>
<router-view></router-view>
</div>
</template>
- active-class属性:指定活跃的路由样式。也可以路由配置里面增添linkActiveClass属性。
通过代码跳转路由
<template>
<router-view></router-view>
<button type="button" @click="homeClick">*首页*</button>
<button type="button" @click="aboutClick">*关于*</button>
</div>
</template>
<script>
export default {
name: 'App',
methods:{
homeClick(){
this.$router.push('/home')
//this.$router.replace('/home')
},
aboutClick(){
this.$router.push('/about')
}
}
}
</script>
<style>
.wangdou{
color: #008800;
background-color: red;
}
</style>
使用this.$router.push()跳转会报错,但是不会影响页面。原因就是在使用vue-router进行路由跳转时,由于导航重复进而报错。解决:重写router原型中的push方法,在router下的index.js中添加
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
动态路由(路径不固定)
//配置路由相关信息
import VueRouter from "vue-router"
import Vue from 'vue'
import home from '../components/home'
import about from '../components/about'
//1.通过Vue.use(插件),安装插件
Vue.use(VueRouter)
//2.创建VueRoter对象
const router=new VueRouter({
//配置路由和组件之间的映射关系
routes:[
//一个映射关系就是一个对象
{
path:'/',
redirect:'/home'
},
{
path:'/home',
component:home
},
{
path:'/about/:userid',
component:about
}
],
mode:'history'
})
//3.将router对象传入Vue实例中
export default router
<template>
<div id="app">
<router-link to="/home" tag="button" replace active-class="wangdou">首页</router-link>
<router-link :to="/about/+userid" tag="button" replace active-class="wangdou">关于</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
userid:'wangdou'
}
}
}
</script>
路由懒加载
- build后生成的dist目录的文件都是打包过的。js目录下:
- app开头的.js文件是自己写的JS逻辑
- chunk-vendors开头的.js是使用到的第三方应用打包代码
//配置路由相关信息
import VueRouter from "vue-router"
import Vue from 'vue'
// import home from '../components/home'
// import about from '../components/about'
const home=()=>import('../components/home')
const about=()=>import('../components/about')