iView基础学习（2）-基础路由

港控/mmm° 2021-09-16 23:48 396阅读 0赞

## 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][http_localhost_8080_argu_love]*

页面显示效果：

![20181118164152576.png][]

<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="{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文件

页面显示效果：

![20181118215833946.png][]

--------------------

### 四、路由重定向 ###

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

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

效果：在访问 [http://localhost:8080/\#/main][http_localhost_8080_main] 的时候，会自动定向到 [http://localhost:8080/\#/][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_home_page] 与 [http://localhost:8080/\#/][http_localhost_8080] 效果相同，都可以访问到首页。

[http_localhost_8080_argu_love]: http://localhost:8080/#/argu/love
[20181118164152576.png]: /images/20210802/42f193397101457bb2953a8ff2e19f84.png
[20181118215833946.png]: /images/20210802/756d903c69bc43a19ca7064d4e92350a.png
[http_localhost_8080_main]: http://localhost:8080/#/main
[http_localhost_8080]: http://localhost:8080/#/
[http_localhost_8080_home_page]: http://localhost:8080/#/home_page