您的位置:首页 > 产品设计 > UI/UE

Vue.js学习系列(四十七)-- 路由

2017-04-18 00:00 295 查看
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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息