一、步骤
- 在src目录下新建router文件夹，并添加index.js文件
- router/index.js代码如下
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//定义路由
const routes = [
{
path: '/key1',
component: () => import("../components/HelloWorld")
}
]
//创建router实例
const router = new VueRouter({
routes //相当于routes: routes
//...还可以配置其他参数
})
export default router
-
在main.js里面将router注入
image.png
现在我们就可以通过
this.$router来访问路由器，也可以通过this.$route来访问当前路由。
- 在你的页面中添加
router-link和router-view标签
<template>
<div>
<router-link to="/key1">router-link:链接</router-link>
<h3>router-view: 路由匹配到的组件显示在下面</h3>
<router-view></router-view>
</div>
</template>
image.png
