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 全局守卫 (每个路由调用前都会触发,根据 ...
随机推荐
- 剖析ASP.NET Core（Part 3）- UseMvc（译）
原文:https://www.stevejgordon.co.uk/asp-net-core-anatomy-part-3-addmvc 发布于:2017年4月环境:ASP.NET Core 1.1 ...
- Android批量图片载入经典系列——Volley框架实现多布局的新闻列表
一.问题描写叙述 Volley是Google 2013年公布的实现Android平台上的网络通信库,主要提供网络通信和图片下载的解决方式,比方曾经从网上下载图片的步骤可能是这种流程: 在ListAda ...
- go语言基础之基础数据类型 bool类型 浮点型
1.bool类型 示例1: package main import "fmt" func main() { var a bool a = true fmt.Println(&quo ...
- tracepath 路由跟踪命令
[root@c1 scripts]# tracepath 100.2.4.144 (备注:linux系统) 1: c1.nulige.com (100.2.4.144) 0.047ms pmtu ...
- flask上传图片或者文件
在flask unittest自动化测试中如何上传图片或者文件 import StringIO picture = StringIO.StringIO(open('/home/admin/Pictur ...
- 取url中的参数值
string url = "https://i.cnblogs.com/EditPosts.aspx?opt=1";//key不区分大小string key="opt&q ...
- IOS生成证书
1.生成本地签名文件, 点击此图标,选择证书助理,按照以下步骤生成签名文件,在生成证书时需要导入签名文件生成. 点击继续就能生成签名文件,保存次CSR文件. 2.生成证书 到下面这个页面选择证书的签名 ...
- stderr重定向
在测试alljoyn时开启了内部日志,输出太多想重定向到文件中,使用如下命令: ./chat -s aaa >.txt 居然还是打印到屏幕上而不是输出到文件中. 查看alljoyn写日志的代码, ...
- 谈谈WEB开发跟非WEB开发各自不同的关注点
何为非WEB开发呢,个人理解就是不是用浏览器打开的应用统称为非WEB开发,抽象讲可以理解成C/S模式. WEB开发,技术人员的积累在如下几个方面: HTML + CSS + JavaScript 各种 ...
- 解决：mysql5.7 timestamp默认值0000-00-00 00:00:00 报错
解决:mysql5.7 timestamp默认值0000-00-00 00:00:00 报错 学习了:https://www.cnblogs.com/cnhkzyy/p/9119339.html se ...