这是原来的路由配置
import Vue from ‘vue‘; import Router from ‘vue-router‘; import Hello from ‘components/Hello‘; Vue.use(Router); export default new Router({ routes: [ { path: ‘/‘, components: { default: Hello } } ] });
可以看出path: ‘/‘就是根目录下的组件，默认是Hello，如果我们想在页面中再引入一个组件，就可以直接在这个path目录下写，比如再加个header组件
import Vue from ‘vue‘; import Router from ‘vue-router‘; import Hello from ‘components/Hello‘; // 导入组件 import Header from ‘components/header/header‘; Vue.use(Router); export default new Router({ routes: [ { path: ‘/‘, components: { default: Hello, // 注册组件，命名为Header Header: Header } } ] });
然后在App.vue文件内写入就好了
<router-view name="Header"></router-view>
不同的组件以name区分，所以要记得带上name,默认的就可以省略。
不同地址的组件
比如我们要实现点击跳转到该组件
不同页面之间的组件
仍然在router文件夹里的index.js文件内，继续配置router信息就可以了
import Vue from ‘vue‘; import Router from ‘vue-router‘; import Hello from ‘components/Hello‘; import Header from ‘components/header/header‘; import goods from ‘components/goods/goods‘; import ratings from ‘components/ratings/ratings‘; import seller from ‘components/seller/seller‘; Vue.use(Router); export default new Router({ routes: [ { path: ‘/‘, components: { default: Hello, Header: Header } }, { // 地址 path: ‘/goods‘, components: { default: goods } }, { path: ‘/ratings‘, components: { default: ratings } }, { path: ‘/seller‘, components: { default: seller } } ] });
然后在App.vue里使用
// 这里相当于一个a标签<router-link to="/goods">商品</router-link>
// 然后在相应的区域里显示<router-view></router-view>
