标签：efault 挂载 sub com bsp vuejs account http isp
1. 打开官方文档 https://router.vuejs.org/zh/installation.html
安装：
npm i vue-router -S
import Vue from ‘vue‘
import app from ‘./App.vue‘
// 导入 vue-router
import vueRouter from ‘vue-router‘
import account from ‘./main/account.vue‘
import goodslist from ‘./main/goodslist.vue‘
// 2. 手动安装 vueRouter
Vue.use(vueRouter)
// 3. 创建路由对象
var router = new vueRouter({
routes: [
{ path: ‘/account‘, component: account },
{ path: ‘/goodslist‘, component: goodslist },
]
})
var vm = new Vue({
el: ‘#app‘,
render: c => c(app),
router // 4. 将路由对象挂载到 vm 上
})
App.vue：
<template>
<div>
<router-link to="/account">account</router-link>
<router-link to="/goodslist">goodslist</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
account.vue 组件：
<template>
<div>
<h1>这是 Account 组件</h1>
</div>
</template>
<script></script>
<style>
</style>
界面效果：
2. 嵌套子路由
import Vue from ‘vue‘
import app from ‘./App.vue‘
// 导入 vue-router
import vueRouter from ‘vue-router‘
import account from ‘./main/account.vue‘
import goodslist from ‘./main/goodslist.vue‘
import login from ‘./subcom/login.vue‘
import register from ‘./subcom/register.vue‘
// 2. 手动安装 vueRouter
Vue.use(vueRouter)
// 3. 创建路由对象
var router = new vueRouter({
routes: [
{ path: ‘/account‘,
component: account,
children: [
{ path: ‘login‘, component: login },
{ path: ‘register‘, component: register },
]
},
{ path: ‘/goodslist‘, component: goodslist },
]
})
var vm = new Vue({
el: ‘#app‘,
render: c => c(app),
router // 4. 将路由对象挂载到 vm 上
})
account.vue
<template>
<div>
<h1>这是 Account 组件</h1>
<router-link to="/account/login">login</router-link>
<router-link to="/account/register">register</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style >
</style>
界面效果：
3. 将路由模块抽离出来
创建一个与 main.js 平级的路由文件 router.js
import Vue from ‘vue‘
// 导入 vue-router
import vueRouter from ‘vue-router‘
import account from ‘./main/account.vue‘
import goodslist from ‘./main/goodslist.vue‘
import login from ‘./subcom/login.vue‘
import register from ‘./subcom/register.vue‘
// 2. 手动安装 vueRouter
Vue.use(vueRouter)
// 3. 创建路由对象
var router = new vueRouter({
routes: [
{ path: ‘/account‘,
component: account,
children: [
{ path: ‘login‘, component: login },
{ path: ‘register‘, component: register },
]
},
{ path: ‘/goodslist‘, component: goodslist },
]
})
export default router
main.js ：
import Vue from ‘vue‘
import app from ‘./App.vue‘
import router from ‘./router.js‘
var vm = new Vue({
el: ‘#app‘,
render: c => c(app),
router // 4. 将路由对象挂载到 vm 上
})
标签：efault 挂载 sub com bsp vuejs account http isp
原文地址：https://www.cnblogs.com/bulu08042/p/14532093.html
