VUE配置路由

详细介绍VUE配置路由/使用方法，及一些注意事项

1.在router / index.js 中,设置路由

import Vue from 'vue'                        //引入基础文件
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [   //这里注意,routes，不要写成routers。这部分即路由核心！
    {
        path:'/', //跳转后路径显示
        name:'home', //设置路由“组件”名称，这里起名不规范，除主页外最好采用驼峰命名法例如：TheHome这种
        component:()=>import('../views/home/home.vue')   //您瞅瞅，这import千万不能漏，否则就会不报错不跳转
    }//要加在这后面就行，按照这三行的格式。有其他写法，不过个人认为这种最规范
]

const router = new VueRouter({
    base: process.env.BASE_URL,
    routes
  })
  
export default router

2.在需要跳转的vue文件中进行设置（export default）

<template>
    <div>
    <h1>--------------------------测试--------------------------</h1>
    </div>
</template>

<script>
export default{     //默认导出
    name:'Home',
}
</script>

3.在点击路由跳转的界面设置（绑定进去）：

<router-link to="/"><button>这是个例子</button></router-link>
//注意，这个to=""指向的就是你在路由中设置的路径。
//如果是把路由跳转绑定在按钮之类的上使用，最好是包围在整个按钮上（就像这个例子），而不是包裹里面文字，否则只有点击文字才跳转，不太方便。
//反面例子是下面这个
<button><router-link to="/">这是个例子</router-link></button>