vue2.0 路由学习笔记

昨天温故了一下vue2.0的路由 做个笔记简单记录一下!

1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js

2.然后修改原有a标签处代码 这里以一个ul li a 为例

<ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

使用 router-link标签替换原有a标签出 router-link会默认生成一个a标签  里面的to="" 指的是访问 to="home" 就是访问home, to="news" 就是访问news  经过改装后代码如下

<ul>
    <li><router-link  to="/home">主页</router-likn></li>
    <li><router-link  to="/news">新闻</router-likn></li>
</ul>

3.在第一步的时候引入了vue-router.js 现在需要创建一个 路由的实例

const router = new VueRouter({
   routes
})

上面的routes是具体的路由配置信息具体配置如下

const routes = [
     {path:‘/home‘,component:Home},
     {path:‘/news‘,component:News}
]    

path指的是访问的网址 对应上面<router-link to="xxx">里的to属性,后面component指的是对应模板

4.最后需要在调用出指定我们定义的上述定义的router

new Vue({
   router,
   el:‘xxxx‘
})

总结:总体来讲vue2.0比起老版本要简单很多

时间: 2024-10-13 08:45:07

vue2.0 路由学习笔记的相关文章

HBase-1.0.1学习笔记汇总

欢迎访问:鲁春利的工作笔记,学习是一种信仰,让时间考验坚持的力量. HBase-1.0.1学习笔记(一)集群搭建 http://luchunli.blog.51cto.com/2368057/1682049HBase-1.0.1学习笔记(二)客户端访问 http://luchunli.blog.51cto.com/2368057/1687458 HBase-1.0.1学习笔记(三)启动脚本解析 http://luchunli.blog.51cto.com/2368057/1690619 HBas

hadoop1.0.3学习笔记

回 到 目 录 最近要从网上抓取数据下来,然后hadoop来做存储和分析.每晚尽量更新 呆毛王赛高 月子酱赛高 小唯酱赛高 目录 安装hadoop1.0.3 HDFS wordcount mapreduce去重 mapreduce算平均分 mapreduce排序 安装hadoop1.0.3 1 ubuntu中安装hadoop 1.0.3 2 ------------伪分布式安装------------- 3 1.安装ssh 4 sudo apt-get install openssh-serve

Vue2.0的变化(2)———vue2.0动画的变化、vue-2.0路由的变化

之前讲解的都是vue1.0的使用,现在我们开始介绍vue2.0,这里的介绍是在vue1.0的基础上进行介绍的,主要介绍的是同vue1.0版本相比2.0的变化 vue2.0动画的变化:现在变成: <transition> 运动东西(元素,属性,路由.....); </transition> class的定义: .fade-enter{} //初始状态 .fade-enter-active{} //变化成什么样 --当元素出来(显示) .fade-leave{} //可不写 .fade

vue2.0路由嵌套

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue2.0路由嵌套2</title> <script type="text/javascript" src="js/vue2.0.js" ></script> <script type="text/javascrip

vue2.0路由

现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js控制路由,goods.vue为跳转页面 app.vue template> <div id="app"> <v-header></v-header> <div class="tab"> <div class=&

vue2.0路由写法和传参

前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/[email protected]/dist/vue-router.js vue-router下载地址:https://github.com/vuejs/vue-router/tree/dev/dist vue2.0路由基本写法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&

vue2.0路由-路由嵌套

vue一个重要的方面就是路由,下面是自己写的一个路由的例子: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> <div> <h1>Home</h1> <p>{{msg}}</p> </div> </template> var About = Vue.extend({ template: '#about' }); 第二种:直接 var

详解关于Vue2.0路由开启keep-alive时需要注意的地方

Vue2.0 做应用必有的需求就是页面数据需要做缓存,不用每次进入页面都要把数据重新请求一遍,每次页面切换都有段等待数据相应时间,这个用户体验可想有多么蛋疼,所以页面缓存是必要的,啥时候需要更新页面数据呢?可以监听状态变化,或者是手动下拉刷新重新请求数据,酱紫,我想用户体验会做的更好. keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件

vue2.0路由进阶

一.路由的模式 第一种用history方式实现,HTML5使用window.history.pushState()实现路由的切换而不刷新页面. 第二种使用hash值的方式来实现. vue2.0两种都可以使用只需要在配置路由时加上 mode:'history/mode'    vue2.0默认为hash模式.需要切换为history模式时使用 const router = new VueRouter({ // mode:'history', routes:routes }) 两种模式的区别: ha