Vue.js 相关知识（路由）
1. 简介
路由，工作原理与路由器相似（路由器将网线总线的IP分发到每一台设备上），Vue中的路由根据用户在网页中的点击，将其引导到对应的页面。
2. 使用步骤
安装vue-router或者直接引入vue-router.js（下载地址：https://router.vuejs.org/）
例：SPA页面（Single Page Application，将一个网站的所有页面写在一个文件，通过不同的div进行区分，再通过div的显示、隐藏实现跳转效果）
- 定义组件对象（页面）、组件模板、注册组件
- 定义router-link、router-view
- router-link：组件会被解析为a标签
- router-view：路由显示的内容会在 router-view 中显示
- 定义路由规则
- 注册到根组件中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-router.js"></script> </head> <body> <div id="app"> <!-- 4. 定义router-link、router-view --> <div> <router-link to='/home'>首页</router-link> <router-link to='/setting'>设置</router-link> <router-view></router-view> </div> </div> <!-- 2. 定义组件模板 --> <template id="home"> <div> <h3>首页页面</h3> </div> </template> <template id="setting"> <div> <h3>设置页面</h3> </div> </template> <script type="text/javascript"> //1. 定义组件对象 let Home = {template:'#home'} let Setting = {template:'#setting'} //5. 定义路由规则 let route = new VueRouter({ routes:[ { path:'/home', component:Home }, { path:'/setting', component:Setting } ] }) let app = new Vue({ el:"#app", //3. 注册到根组件中 components:{ Home, Setting }, //6. 注册到根组件中 router:route }) </script> </body> </html>
3. 嵌套路由
实际开发时，一个页面常会嵌套多个组件（页面），如：设置页面中包括个人设置、系统设置等
- 定义组件对象、组件模板、注册组件
- 定义router-link、router-view
- 嵌套的路由，router-link、router-view 定义在嵌套的地方
- 定义路由规则
- 嵌套的路由，通过 children 属性定义
<div id="app"> <!-- 4. 定义router-link、router-view --> <div> <router-link to='/home'>首页</router-link> <router-link to='/setting'>设置</router-link> <router-view></router-view> </div> </div> <!-- 2. 定义组件模板 --> <template id="home"> <div> <h3>首页页面</h3> </div> </template> <template id="setting"> <div> <h3>设置页面</h3> <router-link to="/setting/user">个人设置</router-link> <router-link to="/setting/system">系统设置</router-link> <router-view></router-view> </div> </template> <template id="user"> <div> <h3>个人设置页面</h3> </div> </template> <template id="system"> <div> <h3>系统设置页面</h3> </div> </template> <script type="text/javascript"> //1. 定义组件对象 let Home = {template:'#home'} let Setting = {template:'#setting'} let User = {template:'#user'} let System = {template:'#system'} //5. 定义路由规则 let route = new VueRouter({ routes:[ { path:'/home', component:Home }, { path:'/setting', component:Setting, children:[ { path:'/setting/user', component:User }, { path:'/setting/system', component:System } ] } ] }) let app = new Vue({ el:"#app", //3. 注册到根组件中 components:{ Home, Setting, User, System }, //6. 注册到根组件中 router:route }) </script>
4. 动态路由
同一个路由地址，根据传递的不同参数，显示不同的内容，如：商品详情页，多个商品共用一个页面（带有动态参数）
- 定义路由规则时，将动态参数使用 :变量 进行参数绑定
<div id="app"> <!-- 4. 定义router-link、router-view --> <div> <router-link to='/detail/1'>手机1</router-link> <router-link to='/detail/2'>手机2</router-link> <router-view></router-view> </div> </div> <!-- 2. 定义组件模板 --> <template id="detail"> <div> <h3>商品详情页</h3> <p>商品id是：{{this.$route.params.id}}</p> </div> </template> <script type="text/javascript"> //1. 定义组件对象 let Detail = {template:'#detail'} //5. 定义路由规则 let route = new VueRouter({ routes:[ { //说明：该处为动态参数，通过this.$route.params.id获取 path:'/detail/:id', component:Detail } ] }) let app = new Vue({ el:"#app", //3. 注册到根组件中 components:{ Detail }, //6. 注册到根组件中 router:route }) </script>
5. 编程式路由
编程式路由，通过js代码实现页面跳转，类似 js 代码 window.location 实现页面跳转
<div id="app"> <div> <button @click="show">查看手机2商品详情</button><br> <router-link to='/detail/1'>手机1</router-link> <router-link to='/detail/2'>手机2</router-link> <router-view></router-view> </div> </div> <template id="detail"> <div> <h3>商品详情页</h3> <p>商品id是：{{this.$route.params.id}}</p> </div> </template> <script type="text/javascript"> let Detail = {template:'#detail'} let route = new VueRouter({ routes:[ { path:'/detail/:id', component:Detail } ] }) let app = new Vue({ el:"#app", components:{ Detail }, router:route, methods:{ show(){ this.$router.push({path:'/detail/2'}) } } }) </script>
6. 路由重定向
重定向，当访问一个路由地址时，自动跳转至其他的路由地址
例：当打开路由页面时，不显示任何内容（默认无匹配的路由规则）
修改代码（在routes中添加红色部分的内容）
routes:[ { path:'/home', component:Home }, { path:'/', redirect:'/home', component:Home }, {……} ]
直接打开当前页面时，自动跳转到/home页面（重定向）
