- A+
所属分类：Web前端
一.文章导读
路由的本质就是一种对应关系，在代码程序中，一个a标签跳转页面，里面a标签里面需要写对用页面的路径，或者写跳转后台的服务。那么这个路径就与页面相对应，我们可以将它视为路由的一种形式。
路由分为前端路由和后端路由
- 后端路由是由服务器端进行实现，并完成资源的分发
- 前端路由是依靠hash值(锚链接)的变化进行实现
下面学习vue的路由管理器：Vue Router
二.路由入门实例
1. 选项卡案例
<body> <div id="app"> <!-- 定义table选项卡头 #号代表锚点必须 --> <a href="#/tab1">tab1</a> <a href="#/tab2">tab2</a> <a href="#/tab3">tab3</a> <a href="#/tab4">tab4</a> <!-- 定义内容 --> <div class="tablebody"> <!-- 根据 tablename的值变换而变换显示组件 --> <component :is="tablename"></component> </div> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* 定义四个组件模板,与a标签一一对应 */ const tab1 = { template: '<strong>table01</strong>' } const tab2 = { template: '<strong>table02</strong>' } const tab3 = { template: '<strong>table03</strong>' } const tab4 = { template: '<strong>table04</strong>' } const vm = new Vue({ el: "#app", data: { tablename: "tab1" }, // 注册 私有组件 components: { tab1, tab2, tab3, tab4 } }); //window.onhashchange 获取最新的hash值并将hash值截取将该值赋值给实例的 tablename window.onhashchange = function() { // location.hash 获取当前最新的hash值 console.log(location.hash); // 截取hash值赋值给 tablename vm.tablename = location.hash.slice(2); /* switch(location.hash.slice(1)){ case '/tab1': vm.tablename = 'tab1' break case '/tab2': vm.tablename = 'tab2' break case '/tab3': vm.tablename = 'tab3' break case '/tab4': vm.tablename = 'tab4' break } */ } </script> <!-- // 加点样式 --> <style type="text/css"> #app { width: 500px; height: 300px; border: 1px solid black; } #app a { display: inline-block; width: 100px; padding: 10px; } .tablebody { margin-top: 20px; text-align: center; background-color: aliceblue; height: 240px; } </style> </body> 三.Vue Router使用
1.Router简介
它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。
Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router
Vue Router的特性：
支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为
2.Vue Router使用
<html> <head> <meta charset="utf-8"> <title>vueRouter使用</title> <!-- // 第一步导入vue-router_3.0.2.js vue-router依赖于vue.js 在后面导入 --> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <!-- 第二步 将上面的代码copy一下--> <div id="app"> <!-- 将原先的a标签修改为 <router-link> 标签 router-link相当于a标签中的a to相当于href --> <router-link to="/tab1">tab1</router-link> <router-link to="/tab2">tab2</router-link> <router-link to="/tab3">tab3</router-link> <router-link to="/tab4">tab4</router-link> <!-- 定义内容 --> <div class="tablebody"> <!-- 3. 添加路由占位符,存放组件 --> <router-view></router-view> <!-- <component :is="tablename"></component> --> </div> </div> </div> <script type="text/javascript"> /* 定义四个组件模板,与a标签一一对应 */ const tab1 = { template: '<strong>table01</strong>' } const tab2 = { template: '<strong>table02</strong>' } const tab3 = { template: '<strong>table03</strong>' } const tab4 = { template: '<strong>table04</strong>' } /* 创建路由 并绑定定义的组件模板 */ var myRouter = new VueRouter({ //routes是路由规则数组 routes:[ //每一个路由规则都是一个对象，对象中至少包含path和component两个属性 //path表示 路由匹配的hash地址，component表示路由规则对应要展示的组件对象 {path:"/tab1",component:tab1}, {path:"/tab2",component:tab2}, {path:"/tab3",component:tab3}, {path:"/tab4",component:tab4}, ] }); new Vue({ el:"#app", // 在实例中挂载路由对象 router:myRouter }) </script> <style type="text/css"> #app { width: 500px; height: 300px; border: 1px solid black; } #app router-link { width: 100px; padding: 10px; } .tablebody { margin-top: 20px; text-align: center; background-color: aliceblue; height: 240px; } </style> </body> </html> 注意:导入的vue-router_3.0.2.js 依赖于vue.js,且必须在创建路由之前导入
3.嵌套路由
在前面组件学习中，我们间接的了解到了父组件和子组件的概念，那么在一个路由实例中存在这另一个子路由，我们将他们称之为嵌套路由
<html> <head> <meta charset="utf-8"> <title>嵌套路由</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <router-link to="/user">user</router-link> <router-link to="/login">login</router-link> <router-view></router-view> </div> <script type="text/javascript"> // 创建 user 模板 const User = { template: ` <div> this is user </div> ` }; // 定义login 父模板模板 login模板中写了定义了两个子路由 const Login = { template: ` <div> <h1>this is Login</h1> <hr> <router-link to="/login/pwd">账号密码登录</router-link> <router-link to="/login/phone">扫码登录</router-link> <router-view></router-view> </div> ` }; // 定义账号登录子路由组件 const account = { template: ` <div> 账号：<input type="text"><br> 密码：<input type="text"> </div> ` } // 定义扫码子路由组件 const phone = { template: ` <div> <img src = "img/2.jpg" alt="vue路由学习" width = "50px"> </div> ` } // 创建路由对象 const myRouter = new VueRouter({ routes: [{ path: "/", redirect: "/user" }, { path: "/user", component: User }, { path: "/login", component: Login, // 定义子路由 children: [{ path: "/login/pwd", component: account }, { path: "/login/phone", component: phone }, ] }, ] }) new Vue({ el: "#app", // 挂载路由 router: myRouter }) </script> </body> </html> 4.动态路由
<body> <div id="app"> <!-- 定义四个 router-link 标签 --> <router-link to="/user/1">点击1</router-link> <router-link to="/user/2">点击2</router-link> <router-link to="/user/3">点击3</router-link> <router-link to="/user/4">点击4</router-link> <router-view></router-view> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var User = { template: "<div>用户:{{$route.params.id}}</div>" } // 创建路由对象 const myRouter = new VueRouter({ routes: [ // {path:"/",redirect:"/user"}, { // 在路径上带一个id相当于带一个值达到动态路由的效果 path: "/user/:id", component: User } ] }); new Vue({ el: "#app", router: myRouter }) </script> </body> 上面的代码我们直接使用 $route.params.id 获取路由中传的参数值，除此之外，我们还可以通过props传值
<body> <div id="app"> <!-- 定义四个 router-link 标签 --> <router-link to="/user/1">点击1</router-link> <router-link to="/user/2">点击2</router-link> <router-link to="/user/3">点击3</router-link> <router-link to="/user/4">点击4</router-link> <router-view></router-view> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 上面的代码我们直接使用 $route.params.id 获取路由传的值，除此之外，我们还可以通过props传值 var User = { props: ["id"], // 使用props传值，在页面中使用{{}}就可以 template: "<div>用户：{{id}}</div>" } // 创建路由实例 制定路由规则 var myRouter = new VueRouter({ routes:[ // props:true 启用 props {path:"/user/:id",component:User,props:true} ] }) new Vue({ el: "#app", data:{ id:1 }, //在app实例中挂载路由 router:myRouter }) </script> </body> 5.路由别名
<body> <div id="app"> <!-- 在前台使用v-bind绑定 路由绑定使用别名name:'user' --> <router-link :to="{ name:'user' , params: {id:111} }">111</router-link> <router-link :to="{ name:'user' , params: {id:222} }">222</router-link> <router-link :to="{ name:'user' , params: {id:333} }">333</router-link> <router-view></router-view> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var User = { props:["id"], template:"<div>用户: {{id}}</div>" } var myRouter = new VueRouter({ routes:[ { // name 为取的别名 path:"/user/:id",component:User,name:"user",props:true } ] }); new Vue({ el:"#app", // 路由挂载 router:myRouter }) </script> </body> 6.编程式导航
页面导航的两种方式：
- 声明式导航：通过点击链接的方式实现的导航
- 编程式导航：调用js的api方法实现导航
this.$router.push("hash地址"); this.$router.push("/login"); this.$router.push({ name:'user' , params: {id:123} }); this.$router.push({ path:"/login" }); this.$router.push({ path:"/login",query:{username:"jack"} }); this.$router.go( n );//n为数字，参考history.go this.$router.go( -1 ); dmeo演示
<body> <div id="app"> <router-link :to="{ name:'user' , params: {id:1} }">user1</router-link> <router-view></router-view> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var User = { props:["id"], template: ` <div>用户:{{id}}<br> <span @click="test01">编程试导航测试1</span> <span @click="test02">编程试导航测试2</span> </div> `, methods:{ // 采用js编程式导航 test01:function(){ this.$router.push("/test01"); }, test02:function(){ this.$router.push("/test02"); } } } // var Test01 = { template:` <span>测试01</span> ` } var Test02 = { template:` <span>测试02</span> ` } // 创建路由 并制定规则 var myRouter = new VueRouter({ routes:[ { path:"/user",component:User,name:'user',props:true }, { path:"/test01",component:Test01,name:'test01',props:true }, { path:"/test02",component:Test02,name:'test02',props:true } ] }); new Vue({ el:"#app", router:myRouter }) </script> </body> gitee地址：https://gitee.com/li_shang_shan/vue-routing-learning
