vue-router 起步步骤详解
2019/6/26 23:10:02
本文主要是介绍vue-router 起步步骤详解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1.在main.js中导入vue-router和组件
import VueRouter from 'vue-router'; // 导入vue-router并将它命名为VueRouter import goods from './components/goods/goods'; // 引入组件 import seller from './components/seller/seller';
2.为组件设置URL,通过url可以动态的加载组件
const urls = [ { path: '/goods', component: goods }, { path: '/rating', component: rating }, { path: '*', redirect: '/goods' } //无效路径重点向到'/goods' ];//定义一个常量来将url和组件绑定起来
3.配置vue-router对象并挂载
const router = new VueRouter( //新建一个vue-router对象 { routes: urls 将组件 (components) 映射到路由 (routes), } ); new Vue({ el: '#app', router, //注册你新建的vue-router对象 render: h => h(App) });
4.配置连接的出口,实现动态的加载组件
<router-view></router-view> //通过模板中放置元素来确定vue-router渲染组件的位置
现在,可以通过url动态加载我们的组件
5.将连接入口,挂载到网页上
<router-link to="/goods">商品</router-link> //本质上是个a标签,to关联了跳转的url
可以通过点击商品和评论完成页面局部的刷新
步骤总结
1.在main.js中导入vue-router和自定义的组件
2.常量定义url和组件的关联
3.创建vue-router对象并导入组件关系,并注册
4.在模板中定义渲染的出口 <router-view></router-view> 和入口<router-link to=" ">商品</router-link>
官方起步文档:https://router.vuejs.org/zh/guide/#html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持找一找教程网。
这篇关于vue-router 起步步骤详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南