Vue入门十一、路由的使用
2019-06-03 23:08
2181 查看
一、vue-router使用
1、下载npm i vue-router -S
2、安装插件Vue.use(VueRouter)
3、创建路由对象
var router = new VueRouter()
4、配置路由规则
router.addRoutes([路由对象])
路由对象{path:'锚点', component:需要显示的组件}
5、将配置好的路由对象交给Vue
6、使用组件<router-view></router-view>
二、代码示例
方法一、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-router.js"></script> <div id="app"></div> <script type="text/javascript"> var Login = { template: ` <div>登陆成功</div> ` } // 安装路由 Vue.use(VueRouter); // 创建路由 var router = new VueRouter(); // 配置路由规则 router.addRoutes( [ {path: '/login', component: Login} ] ) // 使用路由组件 new Vue({ el: '#app', router, template: ` <div> <p>留坑使用路由组件</p> <router-view></router-view> </div> ` } ) </script> </body> </html>
方法二、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-router.js"></script> <div id="app"></div> <script type="text/javascript"> var Login = { template: ` <div>登陆成功</div> ` } // 安装路由 Vue.use(VueRouter); // 创建路由 var router = new VueRouter({ // 配置路由对象 routes: [ {path: '/login', component: Login} ] } ); // 使用路由组件 new Vue({ el: '#app', router, template: ` <div> <p>留坑使用路由组件</p> <router-view></router-view> </div> ` } ) </script> </body> </html>
相关文章推荐
- NHibernate使用入门(十一)
- Vue路由的使用
- Vue入门学习-使用服务器传来的JSON数据交给Vue渲染HTML页面
- Vue.js-----轻量高效的MVVM框架(十一、使用slot分发内容)
- 深入理解vue路由的使用
- 基于vue-cli的vue项目之路由1--最基本的使用
- vue路由vue-router的使用
- 安卓Andriod使用入门(十一)【下拉刷新】
- Vue.js:使用Vue-Router 2实现路由功能介绍
- 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用
- vue结合axios使用入门
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- 使用Vue-Router 2实现路由功能实例详解
- 在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]
- vue从入门到进阶:vue-router路由功能(九)
- windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- vue-router路由的基础使用
- vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
- vue初探--路由简单使用
- 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用