安装 vue-router
cnpm i vue-router -S
index.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<div id="app">
<app></app>
</div>
</body> </html>
main.js
import Vue from 'vue'
// 1，导入 vue-router包
import vueRouter from 'vue-router'
// 导入app组件
import app from './app.vue'
// 导入其他组件
import account from './components/account.vue'
import goodslist from './components/goodslist.vue' // 2，手动安装vueRouter
Vue.use(vueRouter); // 3，创建路由对象
var router = new vueRouter({
routes : [
// account goodslist
{ path : '/account' , component : account},
{ path : '/goodslist' , component : goodslist}
]
}) var vm = new Vue({
el : '#app',
render : c => c(app), // render会把el 指定的容器中所有的内容都清空覆盖
// 所以不要把router-view和router-link直接写到 el 所控制的元素中。
router
})
// 注意app这个组件是通过vm实例的render函数渲染的，render函数如果要渲染组件
// 渲染出来的组件只能放到el : '#app' 所指定的元素中去。
// account 和 goodslist组件是通过路由匹配监听到的，所以，这两个组件只能展示到
// 属于路由的<router-view></router-view>中去。
app.vue
<template>
<div>
<h1>app组件</h1> <router-link to="/account">account</router-link>
<router-link to="/goodslist">goodslist</router-link>
<router-view> </router-view>
</div>
</template> <script>
export default { }
</script> <style lang=""> </style>
account.vue和goodslist.vue组件为简单的template。
路由嵌套
在account组件中加上 登录和注册
main.js
import Vue from 'vue'
// 1，导入 vue-router包
import vueRouter from 'vue-router'
// 导入app组件
import app from './app.vue'
// 导入其他组件
import account from './components/account.vue'
import goodslist from './components/goodslist.vue'
import login from './components/login.vue'
import register from './components/register.vue'
// 2，手动安装vueRouter
Vue.use(vueRouter); // 3，创建路由对象
var router = new vueRouter({
routes: [
// account goodslist
{
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), // render会把el 指定的容器中所有的内容都清空覆盖
// 所以不要把router-view和router-link直接写到 el 所控制的元素中。
router
})
// 注意app这个组件是通过vm实例的render函数渲染的，render函数如果要渲染组件
// 渲染出来的组件只能放到el : '#app' 所指定的元素中去。
// account 和 goodslist组件是通过路由匹配监听到的，所以，这两个组件只能展示到
// 属于路由的<router-view></router-view>中去。
account.vue
<template>
<div>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template> <script>
export default { }
</script> <style lang=""> </style>
style中 lang属性和scoped
<style lang="scss" scoped>
// scoped只让样式在当前组件生效
/* 普通的style标签只支持普通的样式 */
/* 要启用scss或less，需要为style元素设置lang属性 */
body {
div {
color: green;
}
}
</style>
抽离路由模块
需要把vuerouter，和引入的组件，抽离到router.js
router.js 需要注意：main.js和router.js 都需要导入vue-router
// 导入其他组件
import account from './components/account.vue'
import goodslist from './components/goodslist.vue'
import login from './components/login.vue'
import register from './components/register.vue'
import vueRouter from 'vue-router' // 3，创建路由对象
var router = new vueRouter({
routes: [
// account goodslist
{
path: '/account',
component: account,
children : [
{ path : 'login' , component : login},
{ path : 'register' , component : register}
]
},
{
path: '/goodslist',
component: goodslist
}
]
}) // 向外暴露 router
export default router