在router/index.js
//先引入vue文件 import home from '../components/home' //通过Vue.use安装插件 Vue.use(VueRouter); //创建VUeRouter对象 const router = new VueRouter({ routes:[ //配置路径和组件之间的映射关系 //....此处为path路径 和 component 组件 ] }) //如果数据比较多还可以使用另一种写法: const routes = [ { path: '/home', component: home }, { path: '/about', component: about } ] const router = new VueRouter({ routes })在App.vue中使用router-link 标签跳转:
<template> <div id="app"> <router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link> <!--通过此标签来渲染--> <router-view></router-view> </div> </template><router-link>: 该标签是一个vue-router中已经内置的组件，它会被渲染成一个 <a>标签。
<router-view>: 该标签会根据当前的路径， 动态渲染出不同的组件。 和其他标签处于同一个层级。
当我们想让用户从网址进去，不用点击首页就默认跳转到首页时，我们只需要在多配置一个映射就可以了。
const routes = [ { path: '/', redirect: '/home' //我设置的home主页 } ]此时有一个小问题：虽然路径跳转正确，渲染的组件也正确，但是路径这里多了一个 # （hash模式） 解决方法：在创建Router对象的时候之传入了一个属性，现在再加一个mode属性来改变它的默认模式为history模式：
//router/index.js const router = new VueRouter({ routes, mode: 'history'//加上mode })重启项目之后完美解决：
还是在router/index.js中
const routes =[ { path: '/user/:userId',//要是想要在user路径下还有其他分支就添加：userId，当然：后面的名字可以随意改 component: user } ] //添加好之后就可以在router-link中修改了此时点击用户返回的就是这个
$route此时哪个路由活跃就返回哪个。 我们在路由中"："后面设置的是什么，在this.$router.params.userId中params.后面就写什么,这样就可以返回当前活跃的路由:
//<h2>{{userId}}</h2> computed: { userId() { return this.$route.params.userId } } //这样写也可以 <h2>{{$route.params.userId}}</h2>直接获取当我们进行npm run build后，打包的代码中js有三种: 这里我的js文件夹下出现了.map文件，这是因为在config/index.js中productionSourceMap:true设置的是true，改成false就好了
这里map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
当打包构建应用时，javascript包会变得非常大，影响页面加载。 如果我们不能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了
路由懒加载主要作用时将路由对应的组件打包成一个个的js代码块。 只有在这个路由被访问到的时候才会加载对应的组件 这之前路由的用法：
import home from '../components/home' import about from '..components/about' Vue.use(VueRouter); const routes = [ { path: '/home', component: home }, { path: '/about', component:about } ];路由懒加载:
//推荐写法： const home = () => import('../components/home') const about = () => import('../components/about') const user = () => import('../components/user') const routes = [ { path: '/home', component: home }, { path: '/about', component: about }, { path: '/user/:userId', component: user } ] //--------------------------------------------------- const routes = [ { path: '/home', component: () => import('../components/home') }, { path: '/about', component: () => import('../components/about') } ];多了3个js文件，是把组件的抽离出来，使用时再加载。
步骤：
创建对应的子组件，并且在路由映射中配置对应的子路由。在组件内部使用<router-view>router-link 的 to设置为/home/news 上代码： //router/index.js中这样配置 const routes = [ { path: '/home', component: home, //给home中再设置子映射关系 children:[ { path: '', redirect: 'news' },//再设置一个默认首页 { path: "news", component: homeNews }, { path: 'message', component: homeMessage } ] }, { path: '/about', component: about }, { path: '/user/:userId', component: user } ]使用的时候在home添加<router-link>和<router-view>
<div> <h2>我是首页</h2> <p>我是首页内容</p> <router-link to="/home/news">新闻</router-link> <router-link to="/home/message">消息</router-link> <router-view></router-view> </div>