Vue.js路由允许我们通过不同的URL访问不同的内容。通过Vue.js可以实现多视图的单页Web应用(single page web application,SPA)。
Vue.js路由需要载入vue-router库,
可以在vue.js官网下载。这里我们使用的是vue-router.min.js
也可以使用淘宝镜像
cnpm install vue-router
下面我们先来举一个使用vue.js+router实现单页面应用的简单例子。
实现步骤:
1.使用模块化机制编程,导入Vue和VueRouter,要调用Vue.use(VueRouter)
2.定义路由组件
3.定义路由
4.创建router 实例,然后传 `routes` 配置
5.创建和挂载根实例
要通过router配置参数注入路由,从而让整个应用都有路由功能
运行结果:
点击Go to first路径,页面显示出first
点击Go to second路径,页面显示出second