关于前端:第3讲-详解如何在项目里配置路由1

39次阅读

共计 7596 个字符，预计需要花费 19 分钟才能阅读完成。

接着上一节讲，根本框架曾经搭建实现，接下来最重要的就是我的项目里路由配置了，它治理着页面间的跳转，咱们做前端我的项目，基本上步骤就是：搭建前端框架 – 配置我的项目路由 – 开发具体页面，依照这一步骤，咱们来具体解说一下 vue Router 的常识和应用办法，学习这篇文章你能够能够对照着官网文档 Vue Router 来学习

咱们来看一下 src/APP.vue 外面的内容：


<template>

 <div id="app">

 <div id="nav">

 <router-link to="/">Home</router-link> |

 <router-link to="/about">About</router-link>

 </div>

 <router-view/>

 </div>

</template>

其中 <router-link></router-link> 和<router-view/>都是 vue 的内置组件，这里简略介绍下这种内置组件的作用


<router-link></router-link> 它是一个闭合标签，等同于封装后的 a 标签，外面有一个很重要的属性 to，它的值是一个须要跳转的门路

<router-view/> 它是一个开标签，等同于 <router-view></router-view>，它是视图渲染组件，通过 <router-link> 跳转到某个页面时所加载的组件都会在这里渲染

可能有些人有些疑难，什么是闭合标签什么是开标签呢？

简略介绍一下，比方 <router-link to="/">Home</router-link> 它外面有 home 这个内容，所以只能写成闭合标签，像 <router-view></router-view> 这种标签，外面没有内容，就能够简写成开标签<router-view/>

接下来切入正题，咱们来说第一个知识点：

  1. 动静路由匹配

来举一个理论的例子：有一个页面，展现的是所有工作的一个 table 页，在 table 页的每一行，都有一个查看按钮，点击查看能够跳转到工作详情的页面，查看工作具体数据


http://10.0.0.186:18090/#/task/task-detail/10000218

http://10.0.0.186:18090/#/task/task-detail/10000217

http://10.0.0.186:18090/#/task/task-detail/10000216

跳转的时候，须要把 taskId 传过来，而后详情页面能力依据 taskId 申请接口，获取工作的详情

好了，晓得需要了，利用动静路由匹配咱们应该怎么做呢？

在 src/index.js 外面配置路由：


const routes = [

 {

 path: '/',

 name: 'Home',

 component: Home

 },

 {

 path: '/about',

 name: 'About',

 component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

 },

 {

 path: '/task-detail/:taskId',

 name: 'taskDetail',

 component: () => import('../views/task-detail.vue')

 },

 ...errorRoutes

]

在 src/App.vue 里配置路由：


<router-link to="/task-detail/10000218"> 工作详情 10000218</router-link>

<router-link to="/task-detail/10000217"> 工作详情 10000217</router-link>

<router-link to="/task-detail/10000216"> 工作详情 10000216</router-link>

新增 src/views/task-detail.vue 页面，来接管通过路由传递过去的值


<template>

 <section>

 {{$route.params.taskId}}

 </section>

</template>

以上就是动静路由匹配的用法，点击跳转的时候，url 是这样的：http://localhost:4000/#/task-detail/10000218

  1. 编程式导航

除了应用 <router-link> 创立 a 标签来定义导航链接，咱们还能够借助 router 的实例办法，通过编写代码来实现，并且能够传递参数，具体应该怎么做呢？

首先 src/App.vue 外面咱们把 <router-link> 这种形式改成如下形式：


<button @click="go_page('10000218')"> 工作详情 10000218</button>

<button @click="go_page('10000217')"> 工作详情 10000217</button>

<button @click="go_page('10000216')"> 工作详情 10000216</button>

这里咱们定义了一个 go_page 办法，同样也是在 App.vue 外面写：


export default {data () {return {}

 },

 methods: {go_page (taskId) {

 this.$router.push({

 path: '/task-detail',

 query: {taskId: taskId}

 })

 }

 }

}

</script>

而且方才在 src/index.js 外面配置的路由也要变一变了：


{

 path: '/task-detail',

 name: 'taskDetail',

 component: () => import('../views/task-detail.vue')

},

在 src/views/task-detail.vue 页面获取传递过去的值，采纳的形式也不一样了：


<template>

 <section>

 {{$route.query.taskId}}

 </section>

</template>

以上，就能够拿到由路由传递过去的值了，点击跳转的时候，url 是这样的：http://localhost:4000/#/task-detail?taskId=10000218，通过这两个 url，你发现了动静路由匹配和编程式导航的区别了吗？

如果不想在 url 裸露参数进去，go_page办法也能够这样写：


export default {data () {return {}

 },

 methods: {go_page (taskId) {

 this.$router.push({

 name: 'task-detail', // 这里只能采纳路由的别名，不能应用 path: '/task-detail'

 params: {taskId: taskId}

 })

 }

 }

}

</script>

在 src/views/task-detail.vue 页面获取传递过去的值


<template>

 <section>

 {{$route.params.taskId}}

 </section>

</template>

然而这种形式也有弊病，当你在 http://localhost:4000/#/task-detail 路由下刷新这个页面的时候，传递的参数就没了

  1. 嵌套路由匹配

我借用 vue-router 官网的例子来阐明：理论的我的项目往往都是由多层嵌套的组件组合而成，同样，url 中各段动静门路也按某种构造对应嵌套的各层组件：


/product/ele_product/phone            /product/ele_product/computer

+------------------+                  +-----------------+

| product          |                  | product         |

| +--------------+ |                  | +-------------+ |

| | ele_product  | |  +------------>  | | ele_product | |

| | +---------+  | |                  | | +---------+ | |

| | |  phone  |  | |                  | | |computer | | |

| | |         |  | |                  | | |         | | |

| | +---------+  | |                  | | +---------+ | |

| +--------------+ |                  | +-------------+ |

+------------------+                  +-----------------+

比方一个商城的我的项目，产品 - 电子产品 - 手机，产品 - 电子产品 - 电脑，像这种三级的嵌套页面，那么应该怎么写嵌套路由呢？接下来咱们一步步实现：

首先咱们

首先先把这四个页面新建进去：

在 src/views 文件夹下新建 product 文件夹，同时新增 index.vue，ele-product.vue，phone.vue 和computer.vue这四个文件

index.vue


<template>

 <section>

 <h3> 这是产品页 </h3>

 <router-view/>

 </section>

</template>

ele-product.vue


<template>

 <section>

 <h3> 我是电子产品页 </h3>

 <router-view/>

 </section>

</template>

phone.vue


<template>

 <section>

 <h3> 我是手机页 </h3>

 </section>

</template>

computer.vue


<template>

 <section>

 <h3> 我是电脑页 </h3>

 </section>

</template>

同时须要在 src/index.js 外面配置咱们的嵌套路由：


const routes = [

 {

 path: '/',

 name: 'Home',

 component: 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', // 子路由须要后面加 '/'，只有副路由才有

 name: 'ele-product',

 component: () => import('../views/product/ele-product.vue'),

 children: [

 {

 path: 'phone', // 子路由须要后面加 '/'，只有副路由才有

 name: 'phone',

 component: () => import('../views/product/phone.vue'),

 },

 {

 path: 'computer', // 子路由须要后面加 '/'，只有副路由才有

 name: 'computer',

 component: () => import('../views/product/computer.vue'),

 }

 ]

 }

 ]

 },

 ...errorRoutes

]

接下来在 src/App.vue 页面，依据路由拜访这几个页面：


<router-link to="/product"> 产品 </router-link><br>

<router-link to="/product/ele-product"> 电子产品 </router-link><br>

<router-link to="/product/ele-product/phone"> 手机 </router-link>

<router-link to="/product/ele-product/computer"> 电脑 </router-link>

这里你会发现，index.vue和 ele-product.vue 页面都有 <router-view/> 这个标签，因为和 App.vue 页面一样，它们都是父页面，App.vue是根页面，是我的项目中所有页面的父页面，而 index.vue 是ele-product.vue页面的父页面，ele-product.vue是 phone.vue 和computer.vue的父页面，只有这个页面是父页面就须要增加 <router-view/> 标签

  1. 命名路由

在 src/index.js 文件里，在配置路由的时候，每个路由对象上都加了一个 name 属性，为啥子加呢，相当于给这个路由起了一个名字，所以有了命名路由的叫法，有什么用呢？还真有用途，下面咱们在用 <router-link> 做路由跳转时，是怎么写的呢？


<router-link to="/product/ele-product/computer"> 电脑 </router-link>

咱们也能够用命名路由来进行路由跳转：


<router-link :to="{name:'computer'}"> 电脑 </router-link>

这样写也起到了雷同的成果，而且不必写那么一大串长的路由，是不是很不便呢？这里提一下哦，给路由命名的时候，不能存在两个 name 雷同的路由，name 具备唯一性，在配置路由的时候看一下千万别整成多个路由都叫某一个 name 哦

  1. 命名视图

下面咱们提到过，只有一个页面它是父页面，那么外面就要增加一个 <router-view/> 标签，然而如果想在这个父页面显示多个视图，而且让不同的视图显示在指定地位，OK，就要用到命名视图了

还拿下面的产品 - 电子产品 - 手机这个嵌套页面说事儿，当进入了手机这个页面，咱们又分很多手机品牌，比方要在 phone.vue 这个页面别离展现华为专场，苹果专场，小米专场，vivo 专场，怎么做呢？

在 src/views/product 文件夹下新增 apple.vue，mi.vue，vivo.vue 这三个文件，同时批改 phone.vue 这个页面的内容，让它作为华为专场的页面展现：

phone.vue


<template>

 <section>

 <h3> 华为专场 </h3>

 </section>

</template>

apple.vue


<template>

 <section>

 <h3> 苹果专场 </h3>

 </section>

</template>

mi.vue


<template>

 <section>

 <h3> 小米专场 </h3>

 </section>

</template>

vivo.vue


<template>

 <section>

 <h3>vivo 专场 </h3>

 </section>

</template>

并且找到它的父页面 ele-product.vue 页面，批改如下：


<template>

 <section>

 <h3> 我是电子产品页 </h3>

 <router-view/>

 <router-view name="apple"/>

 <router-view name="mi"/>

 <router-view name="vivo"/>

 </section>

</template>

批改 src/router/index.js 里的路由配置：


{

 path: '/product',

 name: 'product',

 component: () => import('../views/product/index.vue'),

 children: [

 {

 path: 'ele-product', // 子路由须要后面加 '/'，只有副路由才有

 name: '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 时，就能够看到页面加载了多个专场视图

  1. 重定向

这个重定向就是帮忙咱们将以后路由指向另外一个路由，在做治理类我的项目（左侧导航栏，右侧视图的我的项目）的时候，咱们就须要用到重定向


{

 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: '拨测工作列表',},

 },

 ]

}

当点击拨测工作治理时，就间接跳转到拨测工作列表页面，之所以能重定向，就是 redirect 在起作用，它的值能够是字符串，也能够是个对象或则办法


// 字符串

{redirect: '/web-task/task-list'}

// 对象

{

 redirect: {name: 'task-list'}

}

// 办法

{

 redirect: to => {

 return {name: 'task-list'}

 }

}

正文完
前端
发表至： 前端
2020-09-15
 0
关于前端:Js-match-方法
关于前端:如何逃离框架孤井
关于前端:头脑风暴问题而不是想法
关于前端:选择篇047JavaScript中的所有内容都是…