Vue--路由
main.js:
1、先在项目安装路由模块:npm install vue-router --save-dev
2、使用路由:main.js首先要引用vue模块:
import Vue from 'vue'
3、再引用路由模块:
import VueRouter from ‘vue-router’
4、使用VueRouter:
Vue.use(VueRouter)
5、配置路由:
import Home from './components/home' /父级组件
import HelloWorld from './components/HelloWorld' /子组件 const router = new VueRouter({
routes:[
{path:‘/’,component:Home}//主页地址
{path:‘/helloworld’,component:HelloWorld}//地址
],
mode:‘history’ //添加这个属性后页面地址就不存在#/的问题
})
6、引用配置好的路由router:
new Vue({
router,
el:'#app'
components: { App },//这是根组件
templater:'<App/>'
})
根目录:这里是App.vue
7、找到路径后,在根组件展示:
<router-view></router-view>
此时刷新界面页面地址变成http://localhost:8080/#/,
当在地址输入http://localhost:8080/#/helloworld,就会跳转到helloworld这个界面
7、写到这里就可以使用a标签跳转了
但是会刷新界面
根目录:App.vue
<templater>
<div id='app'>
<router-view></router-view>
<ul>
<li><a href='/'>home</a></li> //href的地址必须是配置路由的地址
<li><a href='/helloworld'>hello</a></li> //href的地址必须是配置路由的地址
</ul>
</div>
</templater>
8、路由跳转:
不会刷新界面,高效率!
<templater>
<div id='app'>
<router-view></router-view>
<ul>
<li><router-link to='/'>home</router-link></li> //href的地址必须是配置路由的地址
<li><router-link to='/helloworld'>hello</router-link></li> //href的地址必须是配置路由的地址
</ul>
</div>
</templater>
Vue--路由的更多相关文章
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- 攻克vue路由
先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...
- Vue路由学习心得
GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍 1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...
- VUE路由新页面打开的方法总结
平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
- vue路由原理剖析
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见: ...
- 3种vue路由传参的基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...
- 14.vue路由&脚手架
一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...
- react router @4 和 vue路由 详解(八)vue路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...
随机推荐
- 47.Majority Element I & II
Majority Element I 描述 给定一个整型数组,找出主元素,它在数组中的出现次数严格大于数组元素个数的二分之一. You may assume that the array is non ...
- java学习之—队列
/** * 队列 * Create by Administrator * 2018/6/11 0011 * 下午 3:27 **/ public class Queue { private int m ...
- snv的使用
1.搭建SVN服务器 (1)直接安装 (2)创建工号,分组,分配权限(图形化界面的直接操作,非图形界面的需要改配置文件conf文件夹下) (3)创建仓库,D:\Repositories\OA:cmd命 ...
- umount -fl用法
umount, 老是提示:device is busy, 服务又不能停止的.可以用"umount -fl"解决! 挂载: mount - mount a filesystem mo ...
- spring 启动脚本分析
参考:JVM 参数使用总结 参考:java -Xms -Xmx -XX:PermSize -XX:MaxPermSize 参考:JVM调优总结 -Xms -Xmx -Xmn -Xss 参考:JAVA ...
- vue 條件語句
條件判斷使用v-if.v-else-if.v-else. v-show
- jdbc工具类1.0
package cn.zhouzhou; import java.sql.Connection; import java.sql.Driver; import java.sql.DriverManag ...
- 二、两条Linux删除数据跑路命令
一.rm rm -rf / 无提示循环删除根目录,,删除存在被恢复的可能 二.dd dd if=/dev/urandom of=/dev/hda1 随机填写数据到相应分区,直到填满为止.重写后的分区无 ...
- Memcached 分布式集群
首先解释一下我的标题,用到了 分布式 和 集群两个单词,为什么是集群?解决[相同业务]问题的服务器多个以上就称为集群.这里memcached就是做相同任务的(提供缓存服务)为什么是分布式?虽然针对的是 ...
- Js 布尔值操作符
在js中,逻辑与(&&) 和 逻辑或(||)可以对任意的数据类型进行操作,而在高级程序设计中只给出了一系列的规则,并没有进行解释,所以经常记不住.在读其它书籍的时候,读到了它的原理,其 ...