Vue Router基础用法（1）

一、步骤

1. 在src目录下新建router文件夹，并添加index.js文件
2. 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

3. 在main.js里面将router注入

   
   image.png

现在我们就可以通过this.$router来访问路由器，也可以通过this.$route来访问当前路由。

4. 在你的页面中添加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