一、什么是Vue路由
动态的在组件中挂载不同的组件
二、Vue路由配置
1、进入项目,安装vue-router:cnpm install vue-router --save
2、在main.js中引入vue-router,并Vue.use
3、在main.js中配置路由
①创建组件并引入组件
Home.vue组件代码:
<template>
<div>
<h2>{{title}}</h2>
</div>
</template>
<script>
export default {
data() {
return {
title: '首页组件'
}
}
}
</script>
News.vue组件代码:
<template>
<div>
<h2>{{title}}</h2>
</div>
</template>
<script>
export default {
data() {
return {
title: "新闻组件"
}
}
}
</script>
引入组件:
②定义路由
//建议不要修改routes名称,避免出错
const routes = [
{path: '/home', component: Home},
{path: '/news', component: News},
//默认跳转路由,若路由匹配不到,则跳转到首页
{path: '*', redirect: '/home'}
]
③实例化VueRouter
const router = new VueRouter({
//routes简写方式,相当于routes:routes
routes
})
④挂载路由
4、哪个组件需要动态挂载其他组件,需要添加代码
<router-view></router-view>
APP.vue代码:
<template>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {}
}
}
</script>