路由VueRouter的基本使用

1.下载VueRouter到当前工程。

vue2：VueRouter3.x        Vuex3.x。

vue3：VueRouter4.x        Vuex4.x。

在终端使用命令：

year add vue-router@3.6.5

2.引入。

import VueRouter from 'vue-router'

3,安装注册。

Vue.use(VueRouter)

4.创建路由对象。

const router = new VueRouter()

5.注入，将路由对象注入到new Vue 实例中，建立关联。

new Vue({render:h=>h(app),router
}).$mount('#app')

7.创建需要的组件，配置路由规则。

const router = new VueRouter({router:[{path:'/layout',component:Layout},// {path:'/地址栏路径'，component:组件名},]
})

8.配置导航，配置路由出口（路径匹配显示的位置）。

<div><a herf="#/layout">点击跳转<a>
<div>
<div><router-views><router-views>
<div>

<router-views>表示内容显示的位置，可在上面也可在下面。