一、前面我们提到过单页面富应用阶段，那就要依靠我们的前端路由
vue-router
二、配置安装路由
1、当我们在项目中下载好相关的路由插件后（vue-router）我们就可以使用它了
2、在router文件夹下的index.js中学相关的路由配置代码
//首先导入路由 import VueRouter from ‘vue-router‘ import Vue from ‘vue‘
3.这里我们同时还要导入vue，使用vue.use安装插件到当前vue程序
//第一步，通过vue.use安装插件 Vue.use(VueRouter)
4、现在创建路由对象，在路由对象中对路由进行相关配置，这里一个path对应一个组件 值得一提的是一般路由的path有“/”
而嵌套路由中不能有‘/’ 嵌套路由在children数组中进行设置，这里的组件都需要import相关的组件
const Home = () =>
import (‘../components/Home.vue‘)
const User = () =>
import (‘../components/User.vue‘)
const About = () =>
import (‘../components/About.vue‘)
const HomeNews = () =>
import (‘../components/HomeNews.vue‘)
const HomeMessage = () =>
import (‘../components/HomeMessage.vue‘)
//创建VueRouter对象
const routes = [
//创建路由组件
{
path: ‘‘,
redirect: ‘/home‘ //rediret重定向 这里是设置默认情况下的显示页面
},
{
path: ‘/home‘,
component: Home,
children: [ //路由的嵌套使用
{
path: ‘‘,
redirect: ‘news‘
},
{
path: ‘news‘, //这里不能加/
component: HomeNews
},
{
path: ‘message‘, //这里不能加/
component: HomeMessage
}
]
},
{
path: ‘/about‘,
component: About
},
{
path: ‘/user/:userId‘,
component: User
}
]
5、在配置好path和组件的映射关系后，我们就可以根据上面我们配置的路由创建一个路由了
const router = new VueRouter({
routes,
mode: ‘history‘, //默认配置为哈希模式用mode可以指定路由模式
LinkActiveClass: ‘active‘ //处理活跃时候的类名可以在这里改 还可以通过在div中用active-class单个修改
})
6、至于什么是哈希模式和history模式，我将在下一节详细解释
原文：https://www.cnblogs.com/LazyPet/p/12170876.html