配置路由
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