vue-router没有效果的问题解决之一
来源:互联网 发布:应用备份软件 编辑:程序博客网 时间:2024/06/10 22:04
最近在学习vue,刚好学到vue-router,按照视频敲的代码,就是没有出现想要的页面。最后上网查了下,才知道原因。
一:vue-router的安装:
方式1:在 初始化目录的时候,vue会提醒你安装vue-router,可以在这
个时候安装vue-loader
方式2:在终端进入项目,输入 npm install vue-router –save 也会安
装vue-router
二:vue-router的使用:
1.一般会在入口的js文件(main.js)中引入vue-router:import Router
from “vue-router”
2.在main.js中使用vue-router:Vue.use(Router)
3.在main.js中实例化vue-router这个构造函数:
var router = new Router({
routes:[ //注意这是是routes,不是routers,少了r
{
path:’/’ , //代表根目录
component:Hello //以引入Hello.js为例
},
{
path:’/apple.vue’ , //路径
component:Apple //跳转的组件(该组件需要引入到
main.js)
}
]
})
4.添加vue-router到vue实例中:
var vm = new Vue({
el:”#app”,
router:router, //将vue-router添加到Vue的实例中
……..
})
5.定义vue-router显示的位置:在App.vue的模版文件中插入标签:
loacalhost:8080/#/apple 就会进入到Apple组件的这个页面
- vue-router没有效果的问题解决之一
- vue-router 的属性
- vue-router的使用
- vue-router的使用
- Vue-router的使用
- Cardview 没有效果的原因之一
- vue父子组件通信问题解决的思路之一
- 学习vue框架,遇见router-view标签无法显示的问题解决
- 使用vue的router-link
- Vue-router的跳转问题
- vue.js router的配置
- vue-router的详细讲解
- vue-router的那些事儿
- vue-router的详细用法
- vue-router
- vue-router
- vue-router
- vue-router
- 使用Rxjava完成倒计时遇到的问题及处理
- yield的简单用法
- LeetCode 之 Reverse Integer
- activit会签, 多人审批, 简单使用
- 编写php自定义扩展
- vue-router没有效果的问题解决之一
- dedecms-seo标签(title标题、keywords关键词、description描述)详解
- 使用Axis2实现WebServices
- java 安卓学习路线
- 搜索引擎
- Java类的加载过程
- Android四大组件知识
- 关于Django模板报TemplateDoesNotExist异常
- bootstrap 实例大全