2019-10-17

2.8 路由基础（router）

自我感觉，主要是用来不同网页通信的，不知道对不对,知识点比较稀碎，这里主要使用vue-cli来完成

1. npm i vue-router
2. touch router.js明确说明使用路由

import Vue from 'vue';
import VueRouter from 'vue-router';
import pageA from './pages/a.vue';
import pageB from './pages/b.vue';

//明确说明使用路由
Vue.use(VueRouter)

//配置路径
consts routes=[
    {
        path:'./pagea',
        component:pageA
    },{path:'./pageb',
        component:pageB
    }
]

//实例化
const router=new VueRouter({
    routes
})

export default router 

3.App.vue中做如下设置
import router from './router

new Vue({
    router
}).$mount('#app')

4.配置runtimeCompile,在项目根目录中
touch vue.config.js

modules.export={
    runtimeCompiler:true
}

5.的使用

模板为根目录中Public/index.html

内容将会被挂载在网页中

6.pagea路由的切换
pageb
这里to后面的部分，需要与2中的配置路径一致

2中是router的实例化，3中是项目实例化，实例化后，将路由挂载到文档中