共计 919 个字符，预计需要花费 3 分钟才能阅读完成。
vue-router 使用步骤 (本教程并不全面，只研究到了本人够用的程度，如果还想要深入了解路由，请在 vue router 文档中学习)：
手动：
npm 安装 vue-router npm install vue-router
配置路由
1. 在 main.js 同级目录下（目录结构不一定要和我完全一样）新建 router.js；
2. 在 router.js 中引用 vue 和 vue-router 并 用 vue.use（）在 vue 中使用该插件
import vue from “vue”
import router from “vue-router”
vue.use(router)
3. 引入需要配置的页面（可选）
import Home from “./views/Home.vue”
4. 在 router.js 中配置路由
1. 路由配置格式
let routers = [
{
path:”/”,
name:”home”, // 可选
component:Home // 已经引入可以用这中方法
},
{
path:”/about”,
name:”about”, // 可选
component:()=> import(“./views/About.vue”)
// 没有提前引入的页面可以用该方法引入
}
]
2. 实例化该配置
export default new router({
routers
})
在 main.js 中应用该 router 实例
1. 引入实例 `import router from “./router”`
1. 使用该实例
new Vue({
……
router,
……
})
在页面中用 <router-view></router-view> 来放置路由展示部分的 html
在页面中使用路由
<router-link to=”/home”></router-link>
//“/home”要与 routers 中的 path 一致
vue ui 辅助（初学者不建议使用该方法）
在 vue ui 插件页面右上角点击添加 vue-router
万事大吉
额外知识点 npm 运行时 如果 main.js 的 vue 实例中没有 render 配置项则需要在 vue.config.js 文件中额外设置 runtimeCompiler 配置项为 true。（这个配置项设置为 true 后会使得项目最终打包文件大 10kb 不建议使用该方法）