第三讲详解如何在项目中配置路由（一）

按照上一节，基本框架已经搭建完成。接下来最重要的是项目中的路由配置，它管理着页面之间的跳转。我们在做前端项目的时候，基本的步骤是：搭建前端框架--配置项目路由--开发具体的页面。下面根据这一步详细讲解一下vueRouter的知识和使用方法。学习完这篇文章，你可以从官方文档VueRouter学习。我们看一下src/APP.vue的内容：其中和是内置的vue组件，这里简单介绍一下这个内置组件的作用是一个闭合标签，相当于封装了一个标签，里面有一个很重要的属性to，它的值为Apaththatneedstoberedirected是一个开放标签，相当于，它是一个视图渲染组件，通过跳转到某个页面时加载的组件会渲染到这里。可能有人会有一些疑惑，什么是闭标签，什么是开标签？简单点，比如Home包含home的内容，所以只能写成闭合标签，如如果标签中没有内容，可以简写成一个开放标签接下来说第一个知识点：动态路由匹配举一个实际的例子：有一个页面，显示所有任务的一个表格页，在表格中页面每一行都有一个View按钮，点击View跳转到任务详情页面，查看任务详情数据http://10.0.0.186:18090/#/task/task-detail/10000218http://10.0.0.186:18090/#/task/task-detail/10000217http://10.0.0.186:18090/#/task/task-detail/10000216跳转的时候需要传taskId，然后详情页可以请求接口根据taskId，得到任务的详细信息，既然知道了需求，那么动态路由匹配怎么办呢？在src/index.js中配置路由：constroutes=[{path:'/',name:'Home',component:Home},{path:'/about',name:'About',component:()=>import(/*webpackChunkName:"about"*/'../views/About.vue')},{path:'/task-detail/:taskId',name:'taskDetail',组件:()=>import('../views/task-detail.vue')},...errorRoutes]在src/App.vue中配置路由：任务详情10000218任务详情10000217任务详情10000216添加src/views/task-detail.vue页面接收通过路由传递的值以上就是动态路由匹配的用法。点击跳转时，url是这样的：http://localhost:4000/#/task-detail/10000218除了使用创建一个Labels来定义导航链接，我们还可以使用router的实例方法通过写代码来实现，我们可以传递参数。我们应该怎么做？首先，在src/App.vue中，我们将的方法改为如下方法：任务详情10000218任务详情10000217任务详情10000216这里我们定义了一个go_page方法，同样在App.vue写:exportdefault{data(){return{}},methods:{go_page(taskId){this.$router.push({path:'/task-detail',query:{taskId:taskId}})}}}而刚才在src/index.js中配置的路由也会发生变化：{path:'/task-detail',name:'taskDetail',component:()=>import('../views/task-detail.vue')}，在src/views/task-detail.vue页面获取传值，使用的方法不同：上面，可以拿到路由传过来的值。点击跳转的时候url是这样的：http://localhost:4000/#/task-detail?taskId=10000218，通过这两个url，你发现动态路由匹配和程序化导航的区别了吗？如果不想暴露url中的参数，go_page方法也可以这样写：({name:'task-detail',//这里只能使用路由的别名,path:'/task-detail'params:{taskId:taskId}})}}}获取投递在src/views/task-detail.vue页面中的值但是这种方法也有缺点，当你在http://localhost:4000/#/task-detail路由下刷新页面时，传递的参数没有了。嵌套路由匹配。动态路径的每一段也按照一定的结构对应每一层的嵌套组件：/product/ele_product/phone/product/ele_product/computer+----------------++-----------------+|产品||产品||+------------+||+----------+|||ele_product||+------------>||ele_product||||+--------+||----------+|||||电话||||||电脑||||||||||||||||+--------+|||+--------+|||+--------------+|+------------+|+---------------+++--------------+比如一个商城项目，产品-电子产品-手机，产品-电子产品-电脑，像这样三级嵌入的Set页面，那么嵌套路由应该怎么写呢？接下来我们一步一步来实现：首先，我们先创建这四个页面：在src/views文件夹下新建product文件夹，添加index.vue、ele-product.vue、phone.vue和computer。vue的四个文件index.vueele-product.vuephone.vuecomputer.vue同时我们需要在里面配置我们的嵌套路由src/index.js:constroutes=[{path:'/',name:'Home',组件:Home},{path:'/about',name:'About',component:()=>import(/*webpackChunkName:"about"*/'../views/About.vue')},{path:'/task-detail',name:'taskDetail',component:()=>import('../views/task-detail.vue')},{path:'/product',name:'product',component:()=>import('../views/product/index.vue'),children:[{path:'ele-product',//子路由需要在前面加上'/'，只sub-routes有name:'ele-product',component:()=>import('../views/product/ele-product.vue'),children:[{path:'phone',//sub-routes需要在前面加上'/'，只有子路由有name:'phone',component:()=>import('../views/product/phone.vue'),},{path:'computer',//子路由需要在前面加'/'，只有次路由有name:'computer',component:()=>import('../views/product/computer.vue'),}]}]},...errorRoutes]接下来，在src/App.vue页面，根据路由访问这些页面：Product
<路由器链接="/product/ele-product">电子产品
MobileComputer这里会发现index.vue和ele-product.vue页面都有标签，因为和App.vue页面一样，都是父页面，App.vue是根页面，是项目中所有页面的父页面，index.vue是ele-product.vue页面的父页面，ele-product.vue是phone.vue和computer.vue的父页面，只要这个页面是父页面，就需要添加在src/index.js文件中给路由命名的标签，在配置路由的时候，给每一个路由对象都添加了一个name属性，为什么要添加呢，相当于给路由起一个名字，有什么用routing的命名？真的很有用，上面我们用做路由跳转的时候，是怎么写的？Computer我们也可以使用命名Routing来进行路由跳转：Computer这个也是一样的效果，不用写这么长的路由列表，方便吗？在这里提一下。路由命名时，不能有两条路由同名。这个名字是独一无二的。配置路由时，不要称其为单一路由。name哦namedview上面我们说了，只要一个页面是父页面，那么里面就一定要加一个标签，但是如果要在这个父页面上显示多个视图，让不同的视图显示在指定位置，OK，我们将使用命名视图。再来说说上面的产品-电子产品-手机嵌套页面。当我们进入手机页面时，我们看到了很多手机品牌，比如phone。vue页面显示华为专场，苹果专场，小米专场，vivo专场，怎么做？在src/views/product文件夹下添加apple.vue,mi.vue,vivo.vue这三个文件，同时修改phone.vue页面的内容，让它显示为华为专页：phone.vueapple.vuemi.vuevivo.vueand找到其父页面ele-product.vue页面，修改如下：修改src/router/index.js中的路由配置：{path:'/product',name:'product',component:()=>import('../views/product/index.vue'),children:[{path:'ele-product',//子路由需要以'/'开头，只有子路线有名称：'ele-product'，component:()=>import('../views/product/ele-product.vue'),children:[{path:'phone',//子路由需要以'/'开头，只有子路由有name:'phone',components:{default:()=>import('../views/product/phone.vue'),apple:()=>import('../views/product/apple.vue'),mi:()=>import('../views/product/mi.vue'),vivo:()=>import('../views/product/vivo.vue'),},},{path:'computer',//子路由需要前面加'/'，只有次路由有name:'computer',component:()=>import('../views/product/computer.vue'),}]}]}，完成以上操作，当你想访问http://localhost:4000/#/product/ele-product/phone时，可以看到页面加载了多个特殊视图重定向。这个重定向就是帮助我们把当前的路由指向另外一个路由。我们在做管理项目（左侧导航栏，右侧视图中的项目），我们需要使用redirect{path:'/web-task',component:Layout,redirect:'/web-task/task-list',name:'web-task',meta:{title:'拨号测试任务管理',},children:[{path:'task-list',component:resolve=>require(['@/views/web-task/task-list.vue'],resolve),name:'task-list',meta:{title:'拨号测试任务列表',},},]}点击拨号测试任务管理时，会直接跳转tothedial测试任务列表页面之所以可以重定向，是因为redirect起作用了。它的值可以是一个字符串，一个对象或者一个方法//string{redirect:'/web-task/task-list'}//对象{redirect:{name:'task-list'}}//方法{redirect:to=>{return{name:'task-list'}}}