首先需要安装npm install vue-router
然后在Main.js中使用
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
我一般都是使用模块化编程的形式,用.vue单文件,先上例子
1.先看结构
2.BlogHeader.vue
3.App.vue
4.ShowBlog.vue
5.SingeBlog.vue
6.Router.config.js
7.main.js
以上就是实现路由的主要代码
接下来对里面的个别代码做些说明
①router-link
从上面例子中的书写形式就可以看出,router-link是一个组件,它默认会被渲染成一个带有链接的a标签,通过to属性指定链接地址。
注意:被选中的router-link将自动添加一个class属性值.router-link-active。
②replace
一个布尔类型,默认为false。如果replace设置为true,那么导航不会留下history记录,点击浏览器回退按钮不会再回到这个路由。
<router-link to="/blog" replace></router-link>
③tag
router-link默认渲染成a标签,也有方法让它渲染成其他标签,tag属性就用来设置router-link渲染成什么标签的。
<router-link to="/blog" tag="li"></router-link>
④active-class
上面说了被选中的router-link将自动添加一个class属性值.router-link-active,这个属性就是来修改这个class值的。
⑤router-view
这个组件十分关键,它就是用来渲染匹配到的路由的。
可以给router-view组件设置transition过渡,具体用法见Vue2.0 Transition常见用法全解惑。
还可以配合使用,keep-alive可以缓存数据,这样不至于重新渲染路由组件的时候,之前那个路由组件的数据被清除了。比如对当前的路由组件a进行了一些DOM操作之后,点击进入另一个路由组件b,再回到路由组件a的时候之前的DOM操作还保存在,如果不加keep-alive再回到路由组件a时,之前的DOM操作就没有了,得重新进行。如果你的应用里有一个购物车组件,就需要用到keep-alive。
<transition>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
⑥重定向
const routes = [
{ path: '/', redirect: '/blog'}
]
⑦导航式编程
利用vue-router的导航式编程的router.push方法也可以实现上面的需求。
// 在创建vue实例并挂载后调用
router.push('/blog')
router.push方法就是用来动态导航到不同的链接的。它会向history栈添加一个新的记录,点击等同于调用router.push(…)。
vue-router中还有router.replace方法和router.go方法,概念及用法可参考https://router.vuejs.org/zh-cn/essentials/navigation.html。