一：准备工作

1.App.vue

　　

2.main.js

// js的主要入口console.log("ok")import Vue from 'vue'import app from './App.vue'var vm = new Vue({    el:'#app',    render:c=>c(app)})

　　

3.效果

　　组件会替代div容器进行展示

　　

 

 

二：路由

1.安装

　　

 

2.新建两个vue组件

　　

　　其中的一个：

　　

3.导包与创建路由对象

　　注意/

// js的主要入口console.log("ok")import Vue from 'vue'//引用vue-router，然后和vue产生关系import VueRouter from 'vue-router'Vue.use(VueRouter)import account from './main/Account.vue'import goodlist from './main/Goodslist.vue'// 创建路由对象var router =new VueRouter({    routes: [        {path:'/account',component:account},        {path:'/goodlist',component:goodlist}    ]})import app from './App.vue'var vm = new Vue({    el:'#app',    render:c=>c(app),    router})

　　

4.在app.vue中使用

　　效果：

　　

 

 

三：子组件的路由

　　在Account的组件中再继续嵌套

1.新建子组件

　　

 

 

2.处理路由的问题

　　先引用，然后处理路由

// js的主要入口console.log("ok")import Vue from 'vue'//引用vue-router，然后和vue产生关系import VueRouter from 'vue-router'Vue.use(VueRouter)import account from './main/Account.vue'import goodlist from './main/Goodslist.vue'import login from './subcom/login.vue'import register from './subcom/register.vue'// 创建路由对象var router =new VueRouter({    routes: [        {path:'/account',        component:account,        children: [            { path: 'login', component: login },            { path: 'register', component: register }          ]        },        {path:'/goodlist',component:goodlist}    ]})import app from './App.vue'var vm = new Vue({    el:'#app',    render:c=>c(app),    router})

　　

3.修改Account.vue

　　

4.效果

　　

 

 

5.注意点：scoped

　　在login.vue中需要加一个scoped，才可以产生上面的红色。如果不加，其父的div也会变红。

　　

6.注意点

　　这里是Account.vue范围内的修改样式

　　效果：

　　

 

 

四：抽象

1.main.js

　　引用新建的router。js

// js的主要入口console.log("ok")import Vue from 'vue'//引用vue-router，然后和vue产生关系import VueRouter from 'vue-router'Vue.use(VueRouter)import router from './router.js'import app from './App.vue'var vm = new Vue({    el:'#app',    render:c=>c(app),    router})

　　

2.新建router.js

　　注意暴露

import VueRouter from 'vue-router'import account from './main/Account.vue'import goodlist from './main/Goodslist.vue'import login from './subcom/login.vue'import register from './subcom/register.vue'// 创建路由对象var router =new VueRouter({    routes: [        {path:'/account',        component:account,        children: [            { path: 'login', component: login },            { path: 'register', component: register }          ]        },        {path:'/goodlist',component:goodlist}    ]})export default router;