昨天温故了一下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