iView基础学习-基础路由

一、基础知识梳理

（1）router-link和router-view组件

（2）路由配置

A、动态路由（组件复用）

B、嵌套路由（嵌套组件）

C、命名路由（name路由跳转）

D、命名视图（根据name显示对应的组件）

（3）JS路由操作

（4）重定向与别名

二、router-link和router-view组件

  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>

代码解释：

router-link 标签，将来会渲染成 a 标签，其中 to 后面是一个 路径 ，用于 指示路由跳转 。

router-view 标签，路由切换后，会显示在 router-view 下面。

三、路由配置

A、动态路由

在路由配置文件 router.js 中，我们进行动态路由配置，可以 实现路由的复用 。具体做法是在路由的后面拼接 参数 。具体如下：

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

其中，name 就是传入的参数，在对应的组件 argu.vue 中，进行绑定；若 name 改变，那么组件中绑定也会改变。

地址栏：http://localhost:8080/#/argu/love

页面显示效果：

iView基础学习（2）-基础路由_重定向

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

其中，$route 表示当前路由，params 表示对象参数，name 表示动态路由参数，亦即 params 对象中的 key 值。

B、嵌套路由

在组件嵌套的地方，我们可以使用嵌套路由，使用步骤如下：

1、router.js 文件中使用 childdren 配置父子路由；

    // router.js  父子路由
    {
        path: '/parent',
        component: () =>
            import ('@/views/parent.vue'),
        children: [{
            path: 'child',
            name: 'child',
            component: () =>
                import ('@/views/child.vue')
        }]
    }

2、在父组件中使用 router-view ，显示子组件；

// 父组件parent
  <div>
    parent父组件内容
    <router-view></router-view>
  </div>

C、命名路由

在使用 router-link 标签时，除了使用 路径方式 实现路由跳转外，还可以使用 name方式  实现路由跳转。两种方式的区别在于：路径方式 实现路由跳转使用的是 path，name方式 需要使用 对象 形式。代码对比如下：

路径方式：

  // app.vue
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>

name方式：

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

温馨提示：在使用 路径方式 的时候，我们需要使用 “/” ，在使用 name方式 的时候，需要使用 v-bind 绑定。

D、命名视图

另外，还可以为 router-view 标签添加 name 属性，根据 name 属性来显示对应的组件。代码如下：

router.js文件路由配置

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

        }
}

app.vue文件

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

页面显示效果：

iView基础学习（2）-基础路由_路由配置_02

四、路由重定向

关于路由重定向的路由配置如下：

{
        path: '/main',
        redirect: '/'
}

效果：在访问 http://localhost:8080/#/main 的时候，会自动定向到 http://localhost:8080/#/ 。

另外，以下方式也可以实现路由重定向：

{
        path: '/main',
        // 方式1
        // redirect: '/'
        // 方式2
        // redirect: to => {
        //     return {
        //         name: 'home'
        //     }
        // }
        // 方式3
        // redirect: {
        //     name: 'home'
        // }
        // 方式4
        redirect: to => "/"
}

五、路由别名

除了给路由 name 外，我们还可以给路由 alias ，即别名，同样可以访问到对应的页面。

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

效果：访问 http://localhost:8080/#/home_page 与 http://localhost:8080/#/ 效果相同，都可以访问到首页。