命名路由怎么使用

当地址过长时，使用一个名称来标识一个路由会显得尤其方便，下面来通过一个小案例来了解一下命名路由的用法

1、创建helloworld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1><br>
    <br>
    <!--使用router-link组件进行导航，to属性来指定path，router-link默认渲染为a标签-->
    <!--name的值与路由配置中的name值相对应-->
    <router-link :to="{name:'TestRouter2'}">去到testRouter2页面</router-link>
    <br>
    <router-link :to="{name:'TestRouter3',params:{id:123}}">去到testRouter3页面</router-link>
    <div>
      <!--这里是路由的出口，路由匹配的组件渲染到这里-->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '这是HelloWorld页面'
    }
  }
}
</script>

<style scoped></style>

2、创建TestRouter2.vue

<template>
  <div>
    testRouter2
    <button @click="returnPage">返回hello world界面</button>
  </div>
</template>

<script>
export default {
  name: 'TestRouter2',
  data () {return {}},
  methods:{
    // 返回hello world界面
    returnPage(){
      this.$router.push('{name:"HelloWorld"}');//使用命名路由，name值与路由配置中的一致
    }
  }
}
</script>
<style scoped></style>

3、创建TestRouter3.vue

<template>
  <div>
    testRouter3
    该页面的路由参数值为：{{$route.params.id}}
    <button @click="returnPage">返回hello world界面</button>
  </div>
</template>

<script>
export default {
  name: 'TestRouter3',
  data () {return {}},
  methods:{
    // 返回hello world界面
    returnPage(){
      this.$router.push('{name:"HelloWorld"}');//使用命名路由，name值与路由配置中的一致
    }
  }
}
</script>

<style scoped></style>

4、对路由文件index.js进行命名路由的配置

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
import testRouter2 from '@/components/testRouter2';
import testRouter3 from '@/components/testRouter3';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/helloWorld',
      name: 'HelloWorld',//命名路由需配置name
      component: HelloWorld,
    },
    {
      path:'/testRouter2',
      name:'TestRouter2',//命名路由需配置name
      component:testRouter2
    },
    {
      path:'/testRouter3/:id',
      name:'TestRouter3',//命名路由需配置name
      component:testRouter3
      }
  ]
})