1 - 后端路由和前端路由
路由是一个比较广义和抽象的概念，路由的本质就是对应关系，在开发中，路由分为：后端路由、前端路由。
1. 后端路由
概念：根据不同的用户 URL 请求，返回不同的内容
本质：URL 请求地址与服务器资源之间的对应关系
后端路由就是，当浏览器访问一个URL地址，这时候就会去服务器查找对应的资源，这次查找的请求会被后端路由拦截，后端路由会查找指定的资源内容，当查找到之后，后端路由会把资源通过后端路由返回给浏览器，当我们在浏览器又输入新的地址还会重复上个步骤，因此后端路由就是根据不同的URL地址分发不同的资源。
在早期的web开发中，绝大多数网站都是采用后端路由的形式来渲染每一个网站，这种方式叫做后端渲染，存在性能问题，如果用户与服务器之间经常有提交表单这样的数据交互行为，那么后端路由就会造成网页的频繁刷新，体验非常不好，因此就出现了Ajax技术，可以实现前端页面的局部刷新，很大程度上提高了用户体验，但是单纯的Ajax技术并不支持浏览器的前进后退这些历史操作，因此前端又出现了SPA（Single Page Application）单页面应用程序。
2. 前端路由
概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系
3. SPA（Single Page Application）
- SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
- SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）
- 在实现SPA过程中，最核心的技术点就是前端路由
关于SPA（Single Page Application）只需要记住：内容的变化通过Ajax局部更新实现，浏览器地址栏的前进和后退操作通过hash的变化实现。
4. 实现简易前端路由
前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换），核心实现依靠监听hash值变化的事件。
// 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
window.onhashchange = function(){
// 通过 location.hash 可以获取到最新的hash值
location.hash
}
案例效果图：
点击每个超链接之后，会进行相应的内容切换，如下：
① 核心思路
app 里面有个component标签，可以把 component 标签当做是组件的占位符，根据 :is 属性指定组件的名称，把对应的组件渲染到 component 标签所在的位置。
<component :is="comName"></component>
在页面中有一个vue实例对象，vue实例对象中有四个组件，分别是tab栏切换需要显示的组件内容，在页面中有四个超链接，如下：
<!-- 切换组件的超链接 -->
<a href="#/zhuye">主页</a>
<a href="#/keji">科技</a>
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>
注意：这里的#/zhuye就是URL地址最后面的锚点，也叫hash值，用于定位页面的某个位置，如下图：
当我们点击这些超链接的时候，就会改变url地址中的hash值，当hash值被改变时，就会触发onhashchange事件
在触发onhashchange事件的时候，我们根据hash值来让不同的组件进行显示：
window.onhashchange = function() {
// 通过 location.hash 获取到最新的 hash 值
console.log(location.hash);
switch(location.hash.slice(1)){
case '/zhuye':
//通过更改数据comName来指定显示的组件
//因为 <component :is="comName"></component> ，组件已经绑定了comName
vm.comName = 'zhuye'
break
case '/keji':
vm.comName = 'keji'
break
case '/caijing':
vm.comName = 'caijing'
break
case '/yule':
vm.comName = 'yule'
break
}
}
② 全部代码
<!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>
<!-- 导入 vue 文件 -->
<script src="./lib/vue_2.5.22.js"></script>
</head>
<body>
<!-- 被 vue 实例控制的 div 区域 -->
<div id="app">
<!-- 切换组件的超链接 -->
<a href="#/zhuye">主页</a>
<a href="#/keji">科技</a>
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>
<!-- 核心代码：-->
<!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
<!-- 可以把 component 标签当做是 组件的占位符 -->
<component :is="comName"></component>
</div>
<script>
// 定义需要被切换的 4 个组件
// 主页组件
const zhuye = {
template: '<h1>主页信息</h1>'
}
// 科技组件
const keji = {
template: '<h1>科技信息</h1>'
}
// 财经组件
const caijing = {
template: '<h1>财经信息</h1>'
}
// 娱乐组件
const yule = {
template: '<h1>娱乐信息</h1>'
}
// vue 实例对象
const vm = new Vue({
el: '#app',
data: {
comName: 'zhuye' // 默认为主页
},
// 注册私有组件
components: {
zhuye,
keji,
caijing,
yule
}
})
// 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
window.onhashchange = function() {
// 通过 location.hash 获取到最新的 hash 值
console.log(location.hash); // #/zhuye
switch(location.hash.slice(1)){
case '/zhuye':
vm.comName = 'zhuye'
break
case '/keji':
vm.comName = 'keji'
break
case '/caijing':
vm.comName = 'caijing'
break
case '/yule':
vm.comName = 'yule'
break
}
}
</script>
</body>
</html>
2 - Vue Router
1. Vue Router简介
- Vue Router是一个Vue.js官方提供的路由管理器，是一个功能更加强大的前端路由器，推荐使用。
- Vue Router和Vue.js非常契合，可以一起方便的实现 SPA（Single Page Application）单页应用程序的开发。
- Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router。
Vue Router的特性：
- 支持H5历史模式或者hash模式
- 支持嵌套路由
- 支持动态路由传参
- 支持编程式路由
- 支持命名路由
- …...
2. vue-router的使用步骤
- 引入相关的库文件
- 添加路由链接
- 添加路由填充位
- 定义路由组件
- 配置路由规则并创建路由实例
- 把路由挂载到 Vue 根实例中
<!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>
# 1. 引入相关的库文件
<!-- 导入 vue 文件，为全局 window 对象挂载 Vue 构造函数 -->
<script src="./lib/vue_2.5.22.js"></script>
<!-- 导入 vue-router 文件，为全局 window 对象挂载 VueRouter 构造函数 -->
<script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
# 2. 添加路由链接
<!-- router-link 是 vue 中提供的标签，默认会被渲染为 a 标签 -->
<!-- to默认会被渲染为href -->
<!-- to属性的值默认会被渲染为 # 开头的 hash 地址 -->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
# 3. 添加路由占位符
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置 -->
<router-view></router-view>
</div>
<script>
# 4. 定义路由组件
const User = {
template: '<h1>User 组件</h1>'
}
const Register = {
template: '<h1>Register 组件</h1>'
}
# 5. 创建路由实例并配置路由规则
// 创建路由实例对象
const router = new VueRouter({
// routes是路由规则数组
routes: [
// 每一个路由规则都是一个对象，对象中至少包含path和component两个属性
// path表示路由匹配的hash地址，component表示路由规则对应要展示的组件对象
{ path: '/user', component: User },
{ path: '/register', component: Register }
]
})
# 6. 将路由挂载到Vue实例中
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router // ES6中属性名和属性值一样，可以简写如下
router
})
</script>
</body>
</html>
浏览器打开，结果如下：
总结：验证了上面所说，router-link 默认会被渲染为 a 标签，to默认会被渲染为href，to 属性的值默认会被渲染为 # 开头的 hash 地址，将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置。
3. 路由重定向
路由重定向是指，用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向。
可以通过路由重定向为页面设置默认展示的组件，在路由规则中添加一条路由规则即可，如下：
var myRouter = new VueRouter({
// routes是路由规则数组
routes: [
// path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由地址即可
{ path:"/", redirect:"/user"},
{ path: "/user", component: User },
{ path: "/login", component: Login }
]
})
4. 嵌套路由
点击父级路由链接显示模板内容，模板内容中又有子级路由链接，点击子级路由链接显示子级模板内容，这就是嵌套路由。
嵌套路由最关键的代码在于理解子级路由的概念，比如我们有一个/login的路由，那么/login下面还可以添加子级路由，如：/login/account、/login/phone。
参考代码如下：
<!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>
<!-- 1. 导入 vue 文件 -->
<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<!-- 2. 创建父级路由链接 -->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<!-- 3. 创建父级路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
template: '<h1>User 组件</h1>'
}
# 4. 定义父级路由组件
# Register组件中的模板代码里面包含了子级路由链接以及子级路由的占位符
const Register = {
template: `<div>
<h1>Register 组件</h1>
<hr/>
<!-- 4.1 子路由链接 -->
<router-link to="/register/tab1">tab1</router-link>
<router-link to="/register/tab2">tab2</router-link>
<!-- 4.2 子路由的占位符 -->
<router-view />
<div>`
}
# 5. 定义两个子路由组件
const Tab1 = {
template: '<h3>tab1 子组件</h3>'
}
const Tab2 = {
template: '<h3>tab2 子组件</h3>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user'},
{ path: '/user', component: User },
# 6. 通过children属性为/register添加子路由规则，children为数组
{ path: '/register', component: Register, children: [
{ path: '/register/tab1', component: Tab1 },
{ path: '/register/tab2', component: Tab2 }
] }
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 7. 挂载路由实例对象
// router: router
router
})
</script>
</body>
</html>
页面效果大致如下：
注意：路由占位符有双标签<router-view></router-view>、单标签 <router-view />，我试过了，两个使用起来没什么区别，一般我们使用单标签。
5. 动态路由匹配
① 动态路由匹配基本使用
如果某些路由规则它们的一部分是一样的，只有另一部分是动态变化的，这时候我们可以把动态变化的那部分形成路由参数，这些路由参数就叫做动态路由匹配。
示例代码：
<!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>
<!-- 导入 vue 文件 -->
<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<!-- 1. 路由链接的前面一样，后面的值当做参数传递 -->
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
<router-link to="/register">Register</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
# 3. 在路由组件中访问传过来的路由参数，id值我们都知道了，自然就知道当前访问的是什么页面了
template: '<h1>User 组件 -- 用户id为: {{ $route.params.id }}</h1>'
}
const Register = {
template: '<h1>Register 组件</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user'},
# 2. 使用/:进行动态路由匹配，匹配成功之后，1、2、3都会被当做id值，在路由组件中就可以通过id访问传过来的路由参数
{ path: '/user/:id', component: User },
{ path: '/register', component: Register }
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
</body>
</html>
效果图如下：
② 动态路由匹配传递参数
$route.params.id 与对应路由形成高度耦合，不够灵活，所以推荐使用props将组件和路由解耦。
(1) props的值为布尔类型
当props设置为true时，route.params将被设置为组件的props。
var User = {
# 2. 使用 props 接收路由参数
props:["id"],
# 3. 使用路由参数
template:"<div>用户：{{ id }}</div>"
}
var myRouter = new VueRouter({
// routes是路由规则数组
routes: [
// 通过/:参数名 的形式传递参数
# 1. 当`props`设置为`true`时，`route.params`将被设置为组件的`props`。
{ path: "/user/:id", component: User , props: true },
]
})
(2) props的值为对象类型
我们可以将props设置为对象，那么就直接将对象的数据传递给组件进行使用。
var User = {
# 2. 使用 props 接收路由参数
props:["username","pwd"],
# 3. 使用路由参数
template:"<div>用户：{{username}}---{{pwd}}</div>"
}
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过/:参数名 的形式传递参数
# 1. 如果props设置为对象，则传递的是对象中的数据给组件,这时候就把id丢弃了
{ path: "/user/:id", component: User, props:{username:"jack",pwd:123} },
]
})
(3) props的值为函数类型
如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为函数形式。
var User = {
# 2. 使用 props 接收路由参数
props:["id","username","pwd"],
# 3. 使用路由参数
template:"<div>用户：{{id}} -> {{username}}---{{pwd}}</div>"
}
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过/:参数名 的形式传递参数
# 1. 如果props设置为函数，则通过函数的第一个参数获取动态参数对象（route），并可以通过动态参数对象的params属性获取传递的参数
{ path: "/user/:id",
component: User,
props:(route) => {
return {username:"jack", pwd:123, id:route.params.id}
}
},
]
})
动态路由匹配我们使用的不多。
6. 命名路由：给路由取别名
为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。
实例代码：
<!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>
<!-- 导入 vue 文件 -->
<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<!-- 2. 添加了别名之后，可以使用别名进行跳转，并且可以通过params属性对这次跳转传递参数(在规则中通过path: '/user/:id',定义的参数名是什么，在这里就要是什么) -->
<!-- <router-link to="/user/123">User</router-link> --> 原来这么写
<router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
<router-link to="/register">Register</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
# 4. 接收参数并使用
props: ['id', 'uname', 'age'],
template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
}
const Register = {
template: '<h1>Register 组件</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user' },
// { path: '/user/123', component: User } 原来这么写
{
# 1. 通过name属性为路由取一个别名
name: 'user',
path: '/user/:id',
component: User,
# 3. 动态路由匹配传参：props传参
props: route => ({ uname: 'zs', age: 20, id: route.params.id })
},
{ path: '/register', component: Register }
]
})
// 5. 还可以编程式导航
router.push( { name:'user', params: {id:123} } );
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
</body>
</html>
7. 编程式导航
页面导航的两种方式：
- 声明式导航：通过点击链接的方式实现的导航
例如：普通网页中的 <a></a> 链接 或 vue 中的 <router-link></router-link> - 编程式导航：调用js的api方法实现导航
例如：普通网页中的 location.href
Vue Router中常见的导航方式：
// 路径名称
this.$router.push("/login");
// 对象
this.$router.push({ path:"/login" });
// 命名路由，传递参数 (最常用)
this.$router.push({ name:'user', params: {id:123} });
// n为数字，参考history.go
this.$router.go( n ); //前进n
this.$router.go( -1 ); //后退1
注意：实际项目中动态路由匹配使用的不多，使用最多的是命名路由，并且传递参数，如下：
addAddress() {
// 根据路由名字跳转，并且传递参数
this.$router.push({
name: "addAddress",
params: {
title: "添加地址",
addressInfo: {
name: "", //姓名
sex: "", //性别
phone: "", //手机号
address: "", //地址
houseNumber: "", //门牌号
tag: "", //标签
}
}
});
},
// 接收路由跳转携带的参数
beforeRouteEnter(to, from, next) {
next(vm => {
vm.addressInfo = to.params.addressInfo;
vm.title = to.params.title;
});
},
8. 案例：基于vue-router的后台管理案例
案例效果：
点击左侧的"用户管理"、"权限管理"、"商品管理"、"订单管理"、"系统设置"都会出现对应的组件并展示内容，其中"用户管理"组件展示的效果如上图所示，在用户管理区域中的详情链接也是可以点击的，点击之后将会显示用户详情信息。
用到的路由技术要点：
- 路由的基础用法
- 嵌套路由
- 路由重定向
- 动态路由匹配传参
- 编程式导航
根据项目的整体布局划分好组件结构，通过路由导航控制组件的显示：
- 抽离并渲染 App 根组件
- 将左侧菜单改造为路由链接
- 创建左侧菜单对应的路由组件
- 在右侧主体区域添加路由占位符
- 添加子路由规则
- 通过路由重定向默认渲染用户组件
- 渲染用户列表数据
- 编程式导航跳转到用户详情页
- 实现后退功能
代码如下，根据步骤一步一步看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>基于vue-router的案例</title>
<style type="text/css">
html,
body,
#app {
margin: 0;
padding: 0px;
height: 100%;
}
.header {
height: 50px;
background-color: #545c64;
line-height: 50px;
text-align: center;
font-size: 24px;
color: #fff;
}
.footer {
height: 40px;
line-height: 40px;
background-color: #888;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
}
.main {
display: flex;
position: absolute;
top: 50px;
bottom: 40px;
width: 100%;
}
.content {
flex: 1;
text-align: center;
height: 100%;
}
.left {
flex: 0 0 20%;
background-color: #545c64;
}
.left a {
color: white;
text-decoration: none;
}
.right {
margin: 5px;
}
.btns {
width: 100%;
height: 35px;
line-height: 35px;
background-color: #f5f5f5;
text-align: left;
padding-left: 10px;
box-sizing: border-box;
}
button {
height: 30px;
background-color: #ecf5ff;
border: 1px solid lightskyblue;
font-size: 12px;
padding: 0 20px;
}
.main-content {
margin-top: 10px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
height: 45px;
line-height: 45px;
background-color: #a0a0a0;
color: #fff;
cursor: pointer;
border-bottom: 1px solid #fff;
}
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
border: 1px solid #eee;
line-height: 35px;
font-size: 12px;
}
th {
background-color: #ddd;
}
</style>
<!-- 1. 引入库文件 -->
<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!-- 3. 定义要被 vue 实例所控制的区域 -->
<div id="app">
<!-- 7. 设置路由占位符 -->
<router-view></router-view>
</div>
<script>
// 4. 定义 APP 根组件
const App = {
template: `<div>
<!-- 头部区域 -->
<header class="header">传智后台管理系统</header>
<!-- 中间主体区域 -->
<div class="main">
<!-- 左侧菜单栏 -->
<div class="content left">
<ul>
<!-- 8. 设置路由链接 -->
<li><router-link to="/users">用户管理</router-link></li>
<li><router-link to="/rights">权限管理</router-link></li>
<li><router-link to="/goods">商品管理</router-link></li>
<li><router-link to="/orders">订单管理</router-link></li>
<li><router-link to="/settings">系统设置</router-link></li>
</ul>
</div>
<!-- 右侧内容区域 -->
<div class="content right"><div class="main-content">
<!-- 10. 设置路由占位符 -->
<router-view />
</div></div>
</div>
<!-- 尾部区域 -->
<footer class="footer">版权信息</footer>
</div>`
}
// 9. 设置右侧组件
// 13. 设置用户列表组件数据
const Users = {
// 注意:组件的data要求是个函数,返回一个对象,vue实例的data是个对象
data:function() {
return {
userlist: [
{ id: 1, name: '张三', age: 10 },
{ id: 2, name: '李四', age: 20 },
{ id: 3, name: '王五', age: 30 },
{ id: 4, name: '赵六', age: 40 }
]
}
},
methods: {
// 18. 点击详情页跳转
goDetail(id) {
console.log(id)
this.$router.push('/userinfo/' + id)
}
},
// 14. 渲染用户列表组件
template: `<div>
<h3>用户管理区域</h3>
<table>
<thead>
<tr><th>编号</th><th>姓名</th><th>年龄</th><th>操作</th></tr>
</thead>
<tbody>
<tr v-for="item in userlist" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<!-- 17. 绑定单击事件 -->
<a href="javascript:;" @click="goDetail(item.id)">详情</a>
</td>
</tr>
</tbody>
</table>
</div>`
}
// 15. 用户详情页组件
const UserInfo = {
props: ['id'],
template: `<div>
<!-- 19. 在props中接收id,再使用id -->
<h5>用户详情页 --- 用户Id为：{{id}}</h5>
<button @click="goback()">后退</button>
</div>`,
methods: {
// 20. 实现后退功能
goback() {
// 实现后退功能
this.$router.go(-1)
}
}
}
const Rights = {
template: `<div>
<h3>权限管理区域</h3>
</div>`
}
const Goods = {
template: `<div>
<h3>商品管理区域</h3>
</div>`
}
const Orders = {
template: `<div>
<h3>订单管理区域</h3>
</div>`
}
const Settings = {
template: `<div>
<h3>系统设置区域</h3>
</div>`
}
// 5. 创建路由对象
const router = new VueRouter({
routes: [
{
path: '/',
component: App, // 设置根组件
// 12. 重定向为users目录，因为users为app的子组件，所以根组件app和子组件users都可以渲染出来
redirect: '/users',
// 11. 设置子路由规则
children: [
{ path: '/users', component: Users },
// 16. 设置详情页路由规则
// 18. 动态路由匹配传参，使用props传参，将id传过去
{ path: '/userinfo/:id', component: UserInfo, props: true },
{ path: '/rights', component: Rights },
{ path: '/goods', component: Goods },
{ path: '/orders', component: Orders },
{ path: '/settings', component: Settings }
]
}
]
})
// 2. 创建vue实例
const vm = new Vue({
el: '#app',
// 6. 挂载路由对象
router
})
</script>
</body>
</html>
网友评论