小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
Vue前端路由
1. 路由的基本概念与原理
1.1 路由
1.1.1 后端路由
- 概念：根据不同的用户URl请求，返回不同的内容。
- 本质：URl请求地址与服务器资源之间的对应关系。
1.1.2 前端路由
- 概念：根据不同的用户事件，显示不同的页面内容。
- 本质：用户事件与事件处理函数之间的对应关系。
1.1.3 实现简易前端路由
-
基于 URL 中的 hash 实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>01 实现简易的前端路由</title> </head> <body> <div id="app"> <!-- 切换组件的超链接 --> <a href="#/zhuye">主页</a> <a href="#/keji">科技</a> <a href="#/caijing">财经</a> <a href="#/yule">娱乐</a> <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置。 omponent 标签 当做是{组件的占位符}--> <component :is="comName"></component> </div> <script src="js/vue.js"></script> <script> // #region 定义需要被切换的 4 个组件 // 主页组件 const zhuye = { template: '<h1>主页信息</h1>' } // 科技组件 const keji = { template: '<h1>科技信息</h1>' } // 财经组件 const caijing = { template: '<h1>财经信息</h1>' } // 娱乐组件 const yule = { template: '<h1>娱乐信息</h1>' } // #endregion var 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); // location.hash.slice(1)这句话表示从链接中的#后面还是取值 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>
1.2 Vue Router
Vue Router是 Vue.js 官方的路由管理器。
它和 Vue.js 的核心深度继承，可以非常方便的用于SPA应用程序的开发。
它包含的功能都有：
- 支持HTML5 历史模式或hash模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
2. Vue - Router的基本使用
2.1 基本使用步骤
-
引入相关的库文件
-
添加路由链接
-
添加路由填充位
-
定义路由组件
-
配置路由规则并创建路由实例
-
把路由挂载到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>
<script src="js/vue.js"></script>
<!-- 第一步：引入相关的库文件 -->
<script src="js/vue-router_3.0.2.js"></script>
</head>
<body>
<div id="app">
<!-- 第二步：添加路由链接 -->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<!-- 第三步：添加路由填充位 -->
<router-view></router-view>
</div>
<script>
// 第四步：定义路由组件
const User = {
template: '<h1>User 组件</h1>'
}
const Register = {
template: '<h1>Register 组件</h1>'
}
// 第五步：创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [{
path: '/user',
component: User
},
{
path: '/register',
component: Register
}
]
})
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 第六步：把路由挂载到Vue 根实例中 ES6可简写为router
router
})
</script>
</body>
</html>
2.2 路由重定向
路由重定向指的是：用户在访问地址A 的时候，强制用户跳转到地址c，从而展示特定的组件页面;通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向。
示例代码如下：
// 第五步：创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [{
// 路由重定向
path: '/',
redirect: '/user'
}, {
path: '/user',
component: User
},
{
path: '/register',
component: Register
}
]
})
3. vue-router嵌套路由
3.1 嵌套路由的用法
3.1.1 嵌套路由功能分析
- 点击父级路由链接显示模板内容
- 模板内容中又有自己路由链接
- 点击子级路由链接显示子级模板内容
3.1.2 父路由组件模板
- 父级路由链接
- 父组件路由填充位
3.1.3 子路由组件模板
- 子级路由链接
- 子级路由填充位
3.1.4 嵌套路由配置
- 父级路由通过children属性配置子级路由
上述四个步骤的示例代码如下：
<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>
<script src="js/vue.js"></script>
<!-- 第一步：引入相关的库文件 -->
<script src="js/vue-router_3.0.2.js"></script>
</head>
<body>
<div id="app">
<!-- 第二步：添加路由链接 -->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<!-- 第三步：添加路由填充位 -->
<router-view></router-view>
</div>
<script>
// 第四步：定义路由组件
const User = {
template: '<h1>User 组件</h1>'
}
const Register = {
template: `
<div>
<h1>Register 组件</h1>
<hr/>
<!-- 首先添加子路由链接 -->
<router-link to="/register/tab1">Tab1</router-link>
<router-link to="/register/tab2">Tab2</router-link>
<!-- 其次 添加子路由占位符 -->
<router-view></router-view>
</div>
`
}
// 然后添加子路由组件
const Tab1 = {
template: '<h3>tab1子组件</h3>'
}
const Tab2 = {
template: '<h3>tab2子组件</h3>'
}
// 第五步：创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [{
// 路由重定向
path: '/',
redirect: '/user'
}, {
path: '/user',
component: User
},
{
path: '/register',
component: Register,
// 使用children数组添加子路由的路由规则
children: [{
path: '/register/tab1',
component: Tab1
}, {
path: '/register/tab2',
component: Tab2
}]
}
]
})
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 第六步：把路由挂载到Vue 根实例中 ES6可简写为router
router
})
</script>
</body>
效果图如下：
