标签：route 命令 routes hello 位置 world ima 应用 探讨
“vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）”
这段是从网上直接抄的，我们在创建vue项目是有个选项，是否安装vuer-router选择y或者回车，如果不是这么创建的，在命令行安装吧，建议创建时直接安装，省了很多麻烦。
参照网上的栗子没有一个成功的，不知是版本不正确还是什么原因，我的版本是2.9.6，如果你是其他版本，参照我的dome时可能会出错。
先看一下网上的栗子：
这是来自“菜鸟教程”的，一开始我看到后是懵的，js脚本写在那个文件？第一张图的代码写在哪里？后来不甘心，打开xx视频教程，看了一遍又一遍，怎么搞都不对。索性不按照教程的来，自己研究一下吧。
首先假设你已经安装了路由插件。
第一步，在components文件下创建title.vue和title1.vue
title.vue内容：
<template> <div>如果不是为了衣锦返乡，谁愿意远走他乡。</div> </template> <script>
title2.vue内容：
<template>
<div>
<br>
将来的你会感谢现在拼命的你
</div>
</template>
第二步，打开src/router/index.js
import Router from ‘vue-router‘//默认就有的，引入路由 import HelloWorld from ‘@/components/HelloWorld‘//默认就有的 import title1 from ‘@/components/title‘;//引入刚写的组件 import title2 from ‘@/components/title2‘;//引入刚写的组件 Vue.use(Router) export default new Router({ // routes: [{},{}]格式就是这样，默认就有的 routes: [ { path: ‘/title1‘,//与引入的名称一致，就是在浏览器输入的url，后端的应该很了解 component: title1//同上 }, { path: ‘/title2‘, component: title2 } ] })
第三步，保存上面的内容，打开app.vue
<template> <div id="app"> <img src="./assets/logo.png"> <router-link to="/title1">title</router-link> <router-link to="/title2">title2</router-link> <router-view/> </div> </template> <script> export default { name: ‘App‘ } </script> <style> #app { font-family: ‘Avenir‘, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
其中：
<router-link to="/title1">title</router-link> <router-link to="/title2">title2</router-link> 这两行是我们要写的，其他可以删除，也可不变。 * router-link 中的to表示目标路由的链接。 所以这个值可以是一个字符串或者是描述目标位置的对象。
最后，npm run dev 然后查看结果，如有不正确欢迎留言，一起探讨。
结语：可能很多同行有疑问，我写的都是基础的。
没办法，介绍一下我自己，08年从事net后端开发至今，经历过db、后端、前端一起写，由于是前端文盲，在充当救火员的角色时是相当的累。
今年决定用vue，发现前端力量不够，被迫每晚学习一下。各位有好的前端教程、资料都可以发我，我qq:546170667，欢迎骚扰。
标签：route 命令 routes hello 位置 world ima 应用 探讨
原文地址：https://www.cnblogs.com/c546170667/p/11318660.html
