vue2.0 路由学习笔记

Posted 三胖子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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比起老版本要简单很多

 

以上是关于vue2.0 路由学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0学习笔记之webpack-simple模板中的路由简单配置案例

Vue2.0笔记——vue-router路由

vue2.0 代码功能片段

Vue2.0学习—路由(六十五)

vue2.0学习之路由

vue2.0学习-Vue-router