详细介绍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>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐