因为考试的原因,学习前端的步伐慢了三天,学习路由已经是三天前的事情了,今天就把路由的创建和使用写成文章,为了以后的查询和学习。
1、路由的创建:
新建一个vue项目后,打开cscode的终端控制台,输入指令:
yarn add vue-router@4
这样路由就下载好了,但是因为我用的是vue2,所以我下载路由版本应该是:
yarn add vue-router@3
改变版本号,除了在下载的时候注意以外,还可以打开左侧文件的:package.json文件,找到里面的:"dependencies": ,然后找到路由,将版本号改成3,然后在终端控制台上面输入:yarn,然后enter确认,就可以改变版本号了。
2、建设路由:
a、工程化、添加路由版块
在左边新建一个文件夹router,在文件夹中新建文件:index.js,然后在文件中添加指令:
import Vue from "vue"; // 固定写法:引入第三方的包
import VueRouter from "vue-router"; // 固定写法:在vue项目中使用vue-router进行管理
import GoTob from "../components/GoTob.vue"; // 引入组件GoTob
import HelloWorld from "../components/HelloWorld.vue"; // 引入组件HelliWorld
Vue.use(VueRouter); // 固定写法
const router = new VueRouter({
// 1.通过routes添加路由配置,可以添加多个路由配置,routes是一个数组
routes: [
// 2.添加单个路由配置,每个路由配置是一个对象,常用的配置项有:
// path:路由路径
// component:组件实例,引入组件就会有组件实例
{
path: "/", // 主目录
component: HelloWorld,
},
{
path: "/GoTob", // 剩下目录全部是 /加组件名称
component: GoTob,
},
],
});
export default router; // 将路由的实例导出
b、在左侧文件main.js中注入路由模块,在new Vue中注入路由,让整个应用都有路由功能:
3、在app.vue根组件中添加router-view:
4、在组件中引用router让页面进行跳转:
a、在html代码中添加点击事件:
<div class="hello">
<button @click="fromA">点老子去a</button>
</div>
b、添加完点击事件后,给点击事件赋值:跳转页面:
methods: {
fromA: function () {
this.$router.push("/GoTob");
},
},
这样,当点击页面中的按钮,点老子去a的时候,他就会跳转到组件GoTob页面中了。