一、步驟
- 在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")
}
]
//創(chuàng)建router實(shí)例
const router = new VueRouter({
routes //相當(dāng)于routes: routes
//...還可以配置其他參數(shù)
})
export default router
-
在main.js里面將router注入
image.png
現(xiàn)在我們就可以通過
this.$router來訪問路由器，也可以通過this.$route來訪問當(dāng)前路由。
- 在你的頁面中添加
router-link和router-view標(biāo)簽
<template>
<div>
<router-link to="/key1">router-link:鏈接</router-link>
<h3>router-view: 路由匹配到的組件顯示在下面</h3>
<router-view></router-view>
</div>
</template>
image.png
