自定义一个路由：路由就像超链接，跳到别的页面

妖狐艹你老母 2022-05-18 04:53 163阅读 0赞

### 注意：vue文件全部放在src/components文件夹下 ###

自定义一个路由（超链接）：

1、先新建一个vue项目

2、新建RouterTest.vue文件，存放路径src/compents

3、修改src/router下的index.js文件(头顶引入vue和vue-router的组件)

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    
    import RouterTest from '@/components/RouterTest'  //新加，在下方配置component:RouterTest才生效
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path:'/newcontact',  // 和router-link to相呼应，导航到/newcontact
          name:'NewContact',
          component:NewContact
        },
        {
        	path:'/routerTest',  // 和router-link to相呼应，导航到/routerTest
        	name:'RouterTest',   // 和import后的名称相对应
        	component:RouterTest
        }
      ]
    })

4、在原vue文件中添加如下代码，完成vue router(超链接)

<template>
      
        <router-link to="routerTest"><h1>{
       { msg }}</h1> </router-link>
    </template>
    <script>
    export default { //ES6语法，用于输出到外部，这样就可以在其他文件内用import输入
      name: 'HelloWorld',
      data () {    //由于是组件，data必须是个函数，这是ES6写法，data后面加括号相当于data: function () {}
        return {   //记得return不然接收不到数据
          msg: '路由就像超链接' //上面的 msg 就是这里输出的
        }
      }
    }
    </script>
    <style>
    h1 {
      font-weight: normal;
    }
    a {
      color: #42b983;
    }
    </style>