安装 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，手动安装vueRouterVue.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，手动安装vueRouterVue.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 ???????} ???]})// 向外暴露 routerexport default routerVue系列之 => 结合webpack使用vue-router
原文地址：https://www.cnblogs.com/winter-shadow/p/10269441.html