vue 配置路由(router-vue)

配置路由

1.vue项目运行时首先找到main.js文件，通过main.js文件中的el找到App.vue：

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2.要往index.js文件中import进来一个目标文件，例如我需要给test.vue文件加一个路由，那么我首先需要

import Test from '@/components/test'

然后在Router中配置：

{
    path: '/test',
    component: Test
}

---

配好之后的index.vue文件是这个样子：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '../components/test'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
        path: '/test',
        component: Test
    }
  ]
}

3.在test.vue文件中，需要export抛出，这样路由才能找到

<template>
    <div id="demo">
        <button v-on:click="show = !show">
        Toggle
        </button>
        <transition name="fadefade">
            <p v-if="show">hello</p>
        </transition>
    </div>
</template>
<script>
    export default{
        data () {
            return {
            show: true
            }
        }
    }
</script>

下面这段代码中，如果path: '/' 表示默认路径（在不输入具体路径时默认跳转到此路径下）

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

后面的路由要写在默认路由的后面，如：
localhost:8080/HelloWorld#/icon