《vue教程课件》-《vue教程课件》-Vuerouter路由技术

vue-router路由vue-router是Vue官方提供的一个插件，其功能是实现路由管理，它和Vue深度集成，不管是使用hash路由还是history路由模式，vue-router都提供很好的支持。通俗地讲，vue-router的作用是将每个路径映射到对应的组件，并通过路由实现组件之间的的切换。学习目标：了解前端路由的原理熟练使用动态路由的配置熟练使用嵌套路由了解命名路由和命名视图掌握编程式路由5.1前端路由“路由”一词在网络中用来表示路径的选择。Web开发中路由分前端路由和后端路由。后端路由是指所有的超链接都是url地址，所有url都对应服务器上对应的资源，前端路由是指在单页面应用程序中通过hash（#）来改变页面的方式。5.1.1vue-router的引入vue-router是Vue官方提供的一个插件，其功能是实现路由管理，vue-router在使用前需要在页面中引入，通常有以下几种方法。使用本地文件引入首先在vue官方网站中查找vue-router插件并下载到本地，其次在需要使用的文件中通过script标签引用，注意文件引用路径，例如：<scripttype=”text/javascriptsrc=vue-router.js></script>使用CDN方式引入使用该方法不需要下载插件，可以在script标签中引用外部CDN文件，例如：<scriptsrc=”/vue-router/dist/vue-router.js”></script>使用NPM方式引入首先下载安装node.js，其次使用NPM方法进行安装，命令如下：npminstallvue-router--save最后，在项目文件中引用方式如下：importvuefrom‘vue’ImportVueRouterfrom‘vue-router’Vue.user(VueRouter)5.1.2vue-router基础用法通常一个应用程序中由一个或多个组件构成，若要实现组件之间的切换可以通过vue-router来实现，通过vue-router路由实现需要完成以下工作。创建路由组件，也可以从其他文件import引入,例如：varlogin={template:"<h2>登录组件</h2>"}varregister={template:"<h2>注册组件</h2>"}创建路由，每个路由来指定链接地址(path)与组件(component)的映射。路由中path属性表示监听哪个路由链接地址；component属性表示对应的组件，component属性值必须是一个组件模板对象，不能是组件的引用名称，例如：varroutes=[{path:'/login',component:login},{path:'/register',component:register}]（3)创建路由实例，传入路由配置参数，例如：varrouter=newVueRouter({routes}创建并挂载根实例，，通过router配置参数注入路由，让应用程序具有路由功能，例如：varapp=newVue({el:"#app",router})通过<router-link>组件进行导航，to属性设置指定的链接地址(path属性值)，默认渲染为a标签，例如：<router-linkto="/login">登录</router-link><router-linkto="/register">注册</router-link>通过<router-view>组件设置路由对应的组件渲染的位置，例如：<router-view></router-view>完整代码如例5-1所示。<divid="app"><!--5.创建路由导航--><router-linkto="/login">登录</router-link><router-linkto="/register">注册</router-link><!--6.设置组件渲染位置--><router-view></router-view></div><script>//1.创建路由组件varlogin={template:"<h2>登录组件</h2>"}varregister={template:"<h2>注册组件</h2>"}//2.创建路由varroutes=[{path:'/login',component:login},{path:'/register',component:register},]//3.创建router实例varrouter=newVueRouter({routes})//4.创建和挂载根实例varapp=newVue({el:"#app",router})</script>程序运行效果如图5-1所示。图5-1单击登录，运行效果如图5-2所示。图5-2单示注册，运行效果如图5-3所示图5-35.1.3路由重定向在创建路由时，可以通过redirect属性为某一路径重新另一路径，例如：routes路由中添加{path:”/”,redirect:”/login”}，另外添加<router-linkto=”/”>首页</router-link>。运行结果如图5-4所示图5-45.2动态路由动态路由是指在vue-router的路由路径中，可以使用动态参数传参，实现组件之间传值，通常有query和params两种方式传参。5.2.1query方式传参query传参方式是通过导航路径中to属性指定参数，页面跳转时可传递参数并显示在地址栏中，以？key=value方式传参，多个参数之间以&分隔，例如：<router-linkto="/login?username=lwk&pwd=123456">登录</router-link>传递的参数以对象的形式存放在query对象中，因此可以在模板中通过插值表达式{{this.$route.query.key}}的形式输出参数值，例如：varlogin={created(){console.log(this.$route)},template:`<h2>登录组件<br>username:{{this.$route.query.username}}<br>pwd:{{this.$route.query.pwd}}</h2>`}完整代码如例5-2所示。<divid="app"><router-linkto="/login?username=lwk&pwd=123456">登录</router-link><router-linkto="/register">注册</router-link><router-view></router-view></div><script>varlogin={created(){console.log(this.$route)},template:`<h2>登录组件<br>username:{{this.$route.query.username}}<br>pwd:{{this.$route.query.pwd}}</h2>`}varregister={template:"<h2>注册组件</h2>"}varroutes=[{path:'/login',component:login},{path:'/register',component:register},]varrouter=newVueRouter({routes})varapp=newVue({el:"#app",router})</script>程序运行效果如图5-5。图5-5query传参图中右侧的内容是在created生命周期函数中输出this.$route，其中fullpath表示路由全路径，path表示路由，query表示传递的参数。5.2.2params方式传参使用query方式传参，参数会显示在浏览器地址栏中，为了安全期间，不在地址栏中显示参数名，可以采用params方式传参，通常在导航路径中to属性以/value的方式传递参数，例如：<router-linkto="/login/lwk/123456">登录</router-link>在路由path路径中以冒号的形式设置参数名，例如：{path:'/login/:username/:pwd',component:login}当进行路由跳转时，对<router-link>中的”/login/lwk/123456”进行解析。params传递的参数以对象的形式存放在params对象中，因此可以在模板中通过插值表达式{{this.$route.params.key}}的形式输出参数值，例如：varlogin={template:`<h2>登录组件<br>username:{{this.$route.params.username}}<br>pwd:{{this.$route.params.pwd}}</h2>`}完整代码如例5-3所示。<divid="app"><router-linkto="/login/lwk/123456">登录</router-link><router-linkto="/register">注册</router-link><router-view></router-view></div><script>varlogin={created(){console.log(this.$route)},template:`<h2>登录组件<br>username:{{this.$route.params.username}}<br>pwd:{{this.$route.params.pwd}}</h2>`}varregister={template:"<h2>注册组件</h2>"}varroutes=[{path:'/login/:username/:pwd',component:login},{path:'/register',component:register},]varrouter=newVueRouter({routes})varapp=newVue({el:"#app",router})</script>程序运行效果如图5-6所示。图5-6params传参5.3嵌套路由5.3.1嵌套路由基础通常<router-view>标签用来渲染路由组件，当路由组件中又包含<router-view>标签时，就称为嵌套路由。嵌套路由用来实现两级或多级导航菜单。5.3.2嵌套路由的实现创建路由组件varlogin={template:`<div><h2>登录组件</h2><router-linkto=/login/account>帐号登录</router-link><router-linkto=/login/mobil>手机号登录</router-link><router-view></router-view></div>`}varaccount={template:"<p>通过name和pwd进行登录</p>"}varmobil={template:"<p>通过MobilePhone和vcode进行登录</p>"}varregister={template:'<h2>注册组件</h2>'}在login组件中设置/login/account和/login/mobil路径导航,，并添加<router-view></router-view>组件渲染显示位置。（2）创建路由varroutes=[{path:'/login',component:login,children:[{path:'account',component:account},{path:'mobil',component:mobil}]},{path:'/register',component:register},]在第一个路由中设置children路由，path:’account’和path:’mobil’分别表示路由路径为’/login/account’和’/login/mobil’,分别对应路由组件account和mobil。完整代码如例5-4。<divid="app"><router-linkto="/login">登录</router-link><router-linkto="/register">注册</router-link><router-view></router-view></div><script>varlogin={template:`<div><h2>登录组件</h2><router-linkto=/login/account>帐号登录</router-link><router-linkto=/login/mobil>手机号登录</router-link><router-view></router-view></div>`}varaccount={template:"<p>通过name和pwd进行登录</p>"}varmobil={template:"<p>通过MobilePhone和vcode进行登录</p>"}varregister={template:'<h2>注册组件</h2>'}varroutes=[{path:'/login',component:login,children:[{path:'account',component:account},{path:'mobil',component:mobil}]},{path:'/register',component:register},]varrouter=newVueRouter({routes})varapp=newVue({el:"#app",router})</script>程序运行效果如图5-7。图5-7嵌套路由单击“帐号登录”，地址栏中地址为:5500/5.html#/login/account,效果如图5-8。图5-8单击帐号登录单击“手机号登录”，地址栏中地址为:5500/5.html#/login/mobil，效果如图5-9。图5-9单击手机号登录5.4命名路由和命名视图为了便于管理路由和视图，vue-router提出了命名路由和命名视图。命名路由就是给路由定义名称，命名视图是给视图定义名称。5.4.1命名路由在创建路由过程中，除了设置path和component属性外，vue-router还提供了name属性，设置name后，在<router-link>标签中可以通过name设置导航。(1)创建路由组件时指定name属性，例如：varrouter=newVueRouter({routes:[{path:'/login',name:'login',component:login},{path:'/register',name:'register',component:register},]})创建导航时设置to属性，例如：<router-link:to="{name:'login',query:{username:'lwk'}}">登录</router-link><router-link:to="{name:'register',params:{pwd:123456}}">注册</router-link>路由组件中获取相应的值，例如：varlogin={template:`<h3>登录组件<br>username:{{$route.query.username}}</h3>`,},register={template:`<h3>注册组件<br>pwd:{{$route.params.pwd}}</h3>`,}完整代码如例5-5<divid="app"><router-link:to="{name:'login',query:{username:'lwk'}}">登录</router-link><router-link:to="{name:'register',params:{pwd:123456}}">注册</router-link><router-view></router-view></div><script>varlogin={template:`<h3>登录组件<br>username:{{$route.query.username}}</h3>`,},register={template:`<h3>注册组件<br>pwd:{{$route.params.pwd}}</h3>`,}varrouter=newVueRouter({routes:[{path:'/login',name:'login',component:login},{path:'/register',name:'register',component:register},]})varvm=newVue({el:'#app',router})</script>程序运行效果如图5-10，5-11所示。图5-10单击“登录”效果图5-11单击“注册”效果5.4.2命名视图命名视图就是给<router-view>标签定义名称，路由跳转时根据视图名称显示不同的路由组件，如果<router-view>没有设置名字，默认为default。示例5-6<divid="app"><router-viewclass=rw1name=top></router-view><router-viewclass=rw2></router-view><router-viewclass=rw3name=bottom></router-view></div><script>vartitle={template:'<h3>标题区域</h3>'}varcontent={template:'<h3>内容区域</h3>'}varexp={template:'<h3>说明区域</h3>'}varrouter=newVueRouter({routes:[{path:'/',components:{'top':title,'default':content,'bottom':exp}}]})varvm=newVue({el:'#app',router})</script>程序运行效果如图5-12所示。图5-12命名视图程序中第2行代码中定义视图名称name=top,第4行代码中定义视图名称name=bottom,第21行代码指定top视图显示title组件，第22行代码默认显示content组件，第23行代码指定bottom视图显示exp组件。5.5编程式导航编程式导航是通过编写JavaScript代码实现路由间的跳转，在Vue中我们借助$router实例的push、replace和go方法实现导航。相对于编程式导航，我们称<router-link>标签为声明式导航。5.5.1push()方法当需要路由跳转时，可以向push方法中添加一条新记录到浏览器的history栈中，同时当用户单击后退按钮时，可以回到之前的url。在push()方法中，参数可以是字符串或对象，但不能同时出现path和params，可以借助name属性解决。例如5-7。<divid="app"><button@click=toFirst>1.字符串参数</button><button@click=toSecond>2.query传参</button><button@click=toThird>3.params传参</button><router-view></router-view></div><script>varfirst={template:'<h3>字符中参数</h3>'}varsecond={template:`<h3>query传参<br>name:{{$}}<br>pwd:{{$route.query.pwd}}</h3>`}varthird={template:`<h3>params传参<br>id:{{this.$route.params.id}}<br>username:{{this.$route.params.username}}</h3>`}varrouter=newVueRouter({routes:[{path:'/first',component:first},{path:'/second',component:second},{path:'/third',component:third,name:'param'},]})varvm=newVue({el:'#app',router,methods:{toFirst:function(){this.$router.push('/first')},toSecond:function(){this.$router.push({path:'/second',query:{name:'lwk',pwd:123456}})},toThird:function(){this.$router.push({name:'param',params:{id:10,username:'lzh'}})}}})</script>程序运行效果如图5-13。图5-13编程式导航-push()方法单击”1.字符串参数”按钮，效果如图5-14。图5-14push()中字符串参数单击”2.query传参”按钮，运行效果如图5-15。图5-15push()中query参数单击”3.params传参”按钮，运行效果如图5-16。图5-16push()中params参数5.5.2replace()方法$router.push()方法和$router.replace()方法类似，用来实现编程式导航，区别在于使用$router.replace()方法，导航后不会向浏览器history栈中添加新记录，而是替换当前的记录。示例代码如下：methods:{toFirst:function(){this.$router.replace('/first')},toSecond:function(){this.$router.replace({path:'/second',query:{name:'lwk',pwd:123456}})},toThird:function(){this.$router.replace({name:'param',params:{id:10,username:'lzh'}})}}5.5.3go()方法$router.go()方法表示在浏览器history栈中前进或后退几步，$router.go(-1)表示后退一步，相当于history.back(),$router.go(1)表示前进一步，相当于history.forward()，功能类似于浏览器上的前进和后退按钮，相应的地址栏会发生变化。示例代码如下：<button@click=goBack>4.后退一步</button><button@click=goForward>5.前进一步</button>goBack:function(