简单配置Vue路由

简单配置Vue路由

1.  创建一个单文件组件Test.vue

<template>
    <div>Test</div>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>

2. 路由文件中引入此组件并设置路由

import Test from '../components/Test.vue'

const routes = [
  { path: '/', redirect: '/test' },
  { path: '/test', component: Test }
]

3. 在根组件App.vue引入根据当前路由显示不同组件

<router-view></router-view>

注：出现一种情况使用<router-view></router-view>但是没有生效，看生成的html显示<!------>

解决：不知道当时什么情况，也是上面写法但是路由就是不生效，后来Git版本还原又重新写了一遍路由就生效了