Vue Router相关属性

**1，**映射配置
在index.js里创建的VueRouter对象中写入相关的hash路径和相关Vue组件

const routes = [{
        path: '',
        //重定向设置，默认显示的hash为home
        redirect: '/home'
    },
    {
        path: '/home',
        component: home
    },
    {
        path: '/about',
        component: about
    }
]

然后再app.vue中添加router-link和router-view

 <!-- tag可以设置组价的样式。默认为a标签 repalce可以禁用页面返回和前进 -->
    <router-link to='/home' tag="button" replace="">index</router-link>
    <router-link to='/about' tag="button" replace="">about</router-link>
    <router-view></router-view>

**2,**将默认的hash修改为history的方法
使用hash属性时在打开网页后会出现#分隔

改为history属性后可以解决此问题
在index.js中创建的router对象里加入mode属性并将其值设为history

const router = new VueRouter({
    //配置路由和组件之间的对应关系
    routes,
    //可以将默认的hash值改为history值
    mode: 'history'
})

**3，**通过代码实现路由跳转
不用router-link实现路由跳转仅通过代码实现路由跳转的方法如下所示

<template>
  <div id="app">
    <button @click="homeClick">index</button>
    <button @click="aboutClick">about</button>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    //用代码的方式实现路由跳转
    homeClick(){
      this.$router.push('/home')
    },
    aboutClick(){
      this.$router.push('/about')
    }
  },
}

注：以上文件名均是在安装脚手架后默认的文件名