首页 > web前端 > js教程 > 正文

vue中创建路由的几个步骤

一个新手
发布: 2017-10-07 11:39:34
原创
3792人浏览过

在vue中创建路由的几个步骤;
第一步:定义需要路由的组件。
第二步:定义路由。
第三步:创建路由实例,传入所定义路由的配置
第四步:创建挂载路由的根实例。
1、定义路由组件

const Foo : {template: '<p> this is foo </p>
const Bar : {template: '<p> this is bar </p>
.....
登录后复制

2、定义路由

const routes: [
{path: '/foo', component: Foo},
{path: '/bar', component: Bar}
]
登录后复制

3、创建路由实例,传入定义路由的配置

const router = new VueRouter({
        routes: routes
})
登录后复制

4、创建挂载根实例

阿里妈妈·创意中心
阿里妈妈·创意中心

阿里妈妈营销创意中心

阿里妈妈·创意中心0
查看详情 阿里妈妈·创意中心
const app = new Vue({
router: router
}).$mount('#app')
登录后复制

HTML

立即学习前端免费学习笔记(深入)”;

<!--外部链接--><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><p id="app">
  <h1>Hello</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view></p>
登录后复制

以上就是vue中创建路由的几个步骤 的详细内容,更多请关注php中文网其它相关文章!

相关标签:
路由优化大师
路由优化大师

路由优化大师是一款及简单的路由器设置管理软件,其主要功能是一键设置优化路由、屏广告、防蹭网、路由器全面检测及高级设置等,有需要的小伙伴快来保存下载体验吧!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号