vue-router 使用 name 传递参数

vue-router 使用 name 传递参数

在 vue-router 中，有一个特殊的属性，为 name:

        {
            path: '/',
            name: 'Hello',
            component: Hello,
        },

这里的 name 属性可以用过来传递参数，我们来看这样的一个例子：

首先是 Hi 组件：

<template>
    <div>
        <h2>Hi!</h2>
        <h3>{{ msg }}</h3>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'hi',
    data() {
        return {
            msg: 'Hi Page',
        }
    }
}
</script>

然后是 Hi1 和 Hi2 组件：

<template>
    <div>
        <h2>Hi!</h2>
        <h3>{{ msg }}</h3>
    </div>
</template>

<script>
export default {
    name: 'hi1',
    data() {
        return {
            msg: 'Hi1 Page',
        }
    }
}
</script>

<template>
    <div>
        <h2>Hi!</h2>
        <h3>{{ msg }}</h3>
    </div>
</template>

<script>
export default {
    name: 'hi2',
    data() {
        return {
            msg: 'Hi2 Page',
        }
    }
}
</script>

接下来是 router.js 组件

import Vue from 'vue';
import Router from 'vue-router';
import Hello from '@/components/HelloWorld';
import Hi from '@/components/Hi';
import Hi1 from '@/components/Hi1';
import Hi2 from '@/components/Hi2';

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello,
        },
        {
            path: '/hi',
            component: Hi,
            children: [
                {
                    path: '/',
                    name: 'Hello/Hi',
                    component: Hi,
                },
                {
                    path: 'hi1',
                    name: 'Hello/Hi/hi1',
                    component: Hi1,
                },
                {
                    path: 'hi2',
                    name: 'Hello/Hi/hi2',
                    component: Hi2,
                }
            ]
        }
    ]
})

然后在 App 组件中，引入：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <p><router-link to="/">首页</router-link></p>
    <p>
      <router-link to="/hi">Hi 首页</router-link>
    </p>
    <p>
      <router-link to="/hi/hi1">Hi1 页面</router-link>
    </p>
    <p>
      <router-link to="/hi/hi2">Hi2 页面</router-link>
    </p>
    <p>
      {{ $route.name }}
    </p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这里需要注意的是，如果的你的组件中包含子路由（也就是嵌套路由），那么该组件的 name 属性将不会生效，而是子路由的 name 属性生效。

上面的 <p>{{ $route.name }}</p> 会读取到 router.js 文件中路由信息的 name 属性。$route 当你注册了 vue-router 组件时，新增的API，可以获取路由的信息。

以下是结果：

但是不怎常用。

---

我们常使用的是将 name 属性作为标识，与 router 信息绑定并可以通过 params 属性来传递参数。

我们修改上面的 Hi1 组件。

<template>
    <div>
        <h2>Hi!</h2>
        <h3>{{ msg }}</h3>
        <p>{{ $route.params.username }}</p>
        <p> {{ $route.params.id }}</p>
    </div>
</template>

<script>
export default {
    name: 'hi1',
    data() {
        return {
            msg: 'Hi1 Page',
        }
    }
}
</script>

修改 router.js 文件：

import Vue from 'vue';
import Router from 'vue-router';
import Hello from '@/components/HelloWorld';
import Hi from '@/components/Hi';
import Hi1 from '@/components/Hi1';
import Hi2 from '@/components/Hi2';

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello,
        },
        {
            path: '/hi',
            component: Hi,
            children: [
                {
                    path: '/',
                    name: 'Hello/Hi',
                    component: Hi,
                },
                {
                    path: 'hi1',
                    name: 'hi1',
                    component: Hi1,
                },
                {
                    path: 'hi2',
                    name: 'hi2',
                    component: Hi2,
                }
            ]
        }
    ]
})

然后，在 App.vue 组件中进行如下修改：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <p><router-link to="/">首页</router-link></p>
    <p>
      <router-link to="/hi">Hi 首页</router-link>
    </p>
    <p>
      <router-link :to="{name: 'hi1', params: {username: 'qian', id: 3}}">Hi1 页面</router-link>
    </p>
    <p>
      <router-link :to="{name: 'hi2'}">Hi2 页面</router-link>
    </p>
    <p>
      {{ $route.name }}
    </p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我们修改了 <router-link> 标签中 to 属性，将其与后面的对象进行绑定。这里进行绑定之后，就意味着 Hi1 页面的 link 标签与 router 信息中 name 属性值为 ‘hi1’ 的 router 信息绑定，此时，点击会跳转至 /Hi/hi，同时，params 属性中的属性值，将会被传递到对应组件（这里是 Hi1 组件），并可以通过 APi： $router.params 获取。

执行结果如下：