VUE配置路由
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>
更多推荐
已为社区贡献2条内容
所有评论(0)