Vue-admin工作整理（三）：路由

1、router-link和router-view组件

　　router-link组件实际上是封装了一个a标签(链接标签)，里面有一个重要属性：“to”,它的值是一个路径，其路径对应的渲染组件，要在路由列表（router->router.js）里定义，该路由列表为一个数组形式存放不同的路由对象，一个基本的路由对象，必须包含两个属性：path、component；path为对应的路径(在url输入的路径),component为对应path路径要渲染的组件

　　router-view组件是一个视图渲染组件，通过router-link实现跳转的组件，其加载动作都需要通过router-view来渲染

2、路由配置

动态路由

　　　　通过路由url中传递不同的参数给同一组件，达到呈现不同内容的目的：

路由列表中添加一个动态路由定义：

{
    path: '/argu/:name',
    component: () => import('@/views/argu.vue')
  }

Views中增加对应的argu.vue组件：

<template>
  <div>
    {{ $route.params.name }}
  </div>
</template>

<script>
export default {

}
</script>
<style lang="less" scoped>

</style>

备注：

{{ $route.params.name }}可以直接获取到路由列表中定义的:name值，$route表示获取当前路由对象

　　　　　　Run后执行的效果为：

嵌套路由

　　　　顾名思义组件套组件呈现，实现思路为：路由列表定义一个父组件：parent，然后在父组件下定义子组件：child，强调：在parent.vue中必须要增加视图渲染组件（router-view）才能使子组件渲染出来，具体实现步骤：

路由列表增加嵌套关系的组件：

{
    path: '/parent',
    component: () => import('@/views/parent.vue'),
    children: [
      {
        path: 'child',
        component: () => import('@/views/child.vue')
      }
    ]
  }

Views中增加对应的parent.vue、child.vue组件：

parent.vue:

<template>
  <div>
    I am Parent !!!
    <router-view/>
  </div>
</template>

child.vue:

<template>
  <div>
    I am Child !!!
  </div>
</template>

　　　　　　　　Run后执行的效果为：

命名路由

　　　　通过给路由对象增加name属性，其他组件通过name来读取该对象的方法，比如 home和about路由对象增加name属性：

{
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
  }

　　　　然后App.vue中通过修改router-link组件的to方法，由原有的路径访问更改为对象的name属性访问：

<template>
  <div id="app">
    <div id="nav">
      <router-link :to="{ name: 'home' }">Home</router-link> 
      <router-link :to="{ name: 'about' }">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

备注：:to是v-bind:to的缩写两个等同

命名视图

　　　　如果想在同一个页面上显示多个视图，而且让每一个视图显示指定的位置，实现思路：

在App.vue中增加命名视图：

<template>
  <div id="app">
    <div id="nav">
      <router-link :to="{ name: 'home' }">Home</router-link> |
      <router-link :to="{ name: 'about' }">About</router-link>
    </div>
    <router-view/>
    <router-view name="email"/>
    <router-view name="tel"/>
  </div>
</template>

路由列表中增加命名路由定义【只是由传统的路由对象的component调整为复式的components】,如果1步骤没有命名，则在2步骤中默认的路由对象为default：

  {
    path: '/name_view',
    components: {
      default: () => import('@/views/child.vue'),
      email: () => import('@/views/email.vue'),
      tel: () => import('@/views/tel.vue')
    }
  }

Views中增加对应的组件

email.vue:

<template>
  <div>
    Email: 8130512@qq.com
  </div>
</template>

tel.vue：

<template>
  <div>
    Tel: 18888888888
  </div>
</template>

　　　　　　　　Run后的结果呈现：

3、重定向和别名

重定向：把当前要访问的url 重定向到另一个url上，实现思路：在路由列表中增加组件对象：
```
{
    path: '/main',
    redirect: '/'
  }
```
备注：实现的内容就是当访问main这个url的时候，自动重定向到/（首页），也可以通过命名路由的方式来访问
```
{
    path: '/main',
    redirect: {
      name: 'home'
    }
  }
```

　　　　也可以通过方法的方式来实现：

{
    path: '/main',
    redirect: to => {
      return {
        name: 'home'
      }
    }
  }

　　　2. 别名：我们在访问一个路径的时候，可以给它定义一个其他的名字，效果一样都是访问同一个页面，别名的关键字用的是：alias 用法跟name一样, 注意别名前面要有反斜杠:

{
    path: '/',
    name: 'home',
    alias: '/home_page',
    component: Home
  }

4、history模式

　　路由初始的

Vue-admin工作整理（三）：路由

猜你喜欢