vue路由使用
<body>
<div id="itany">
<div>
<!--使用router-link组件来定义导航,to属性指定链接url-->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<!--router-view用来显示路由内容-->
<router-view></router-view>
</div>
</body>
</html>
<script>
// 1.定义组件
var Home={
template:'<h3>我是主页</h3>'
}
var News={
template:'<h3>我是新闻</h3>'
}
// 2.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'*',redirect:'/home'}//重定向,即默认的情况下打来home组件;
]
// 3.创建路由实例
const router=new VueRouter({
routes,
linkActiveClass:'active'//更新活动链接的class类名
});
// 4.创建根实例并将路由挂载到vue实例上
new Vue({
el:'#itany',
router//注入路由 })
</script>
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 全局守卫 (每个路由调用前都会触发,根据 ...
随机推荐
- XenApp应用虚拟化介绍
https://wenku.baidu.com/view/635223c26137ee06eff91864.html
- 流畅的python第十章序列的修改,散列和切片学习记录
只要实现了__len__和__getitem__两个方法即可将该类视为序列. 切片原理 动态存取属性 如果实现了__getattr__方法,也要定义__setattr__方法,以防对象行为不一致
- Maven仓库设置代理
线上服务器是没有外网环境的, 添加代理配置如下: <settings> ... <proxies> <proxy> &l ...
- Struts2中的页面跳转
内容源自:Struts2中的页面跳转 一.全局页面的设置如果<package>包中的一些action都返回success,并且返回的页面都是同一个JSP页面,这样就可以配置全局的结果页面. ...
- 安装错误 ERROR: DW050: - Microsoft Visual C++ 2010 Redistributable Package (x86): Install failed
这个问题很可能是你的 Microsoft Visual C++ 2010 Redistributable Package (x86) 太新的缘故,所以无法安装成功,导致最终的失败. 在控制面板-程序和 ...
- 我为什么选择ANGULAR 2?
没有选择是痛苦的,有太多的选择却更加痛苦.而后者正是目前前端领域的真实写照.新的框架层出不穷: 它难吗?它写得快吗?可维护性怎样?运行性能如何?社区如何?前景怎样?好就业吗?好招人吗?组建团队容易吗? ...
- VLC 源代码结构
x64 sudo apt-get install -y liblua5.2-dev libmad0-dev libavutil-dev libavcodec-dev libavformat-dev l ...
- js中,“\”转义字符的使用
(1)针对双引号“”的使用: html= "<a href=\"javascript:void(0)\" onclick=\"getSubContent( ...
- 01-spring-专题IOC
接口: 1,用于沟通的中介物的抽象化 2,实体把自己提供给外界的一种抽象化说明,用以内部操作分离出外部沟通方法,使其能被修改内部而不影响外界其他实体与其交互的方式(内部可能修改了,但是接口不变). 简 ...
- Name与x:Name的关系
小序: 如果想用Google搜包含冒号的内容怎么办?比如我想搜x:Name这个字符串…… 原来,应该是这样——x::Name 这世道,连搜索也要加转义,全民程序员,要不要人活了? 正文: ...