vue路由

Posted 2022-06-18 c546170667

“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，欢迎骚扰。