首页 > 代码库 > Vue基础---->vue-router的使用(一)
Vue基础---->vue-router的使用(一)
用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js 时,我们就已经把组件组合成一个应用了,当你要把 vue-router 加进来,只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染它们。
vue-router的使用一
一、在html的代码中,我们写一个简单的例子。这里的vue.js和vue-router的版本都是2。如果vue版本不对应,就不会生效。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../vue.js"></script> <script type="text/javascript" src="../vue-router.js"></script></head><body> <div id="app"> <h1>Hello App!</h1> <p> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <router-view></router-view> </div> <script type="text/javascript" src="js/vue7.js"></script></body></html>
二、在js中的代码如下:
// 0. 如果使用模块化机制编程, 要调用 Vue.use(VueRouter)// 1. 定义(路由)组件。// 可以从其他文件 import 进来const Foo = { template: ‘<div>foo</div>‘ }const Bar = { template: ‘<div>bar</div>‘ }// 2. 定义路由// 每个路由应该映射一个组件。 其中"component" 可以是// 通过 Vue.extend() 创建的组件构造器,// 或者,只是一个组件配置对象。// 我们晚点再讨论嵌套路由。const routes = [ { path: ‘/foo‘, component: Foo }, { path: ‘/bar‘, component: Bar }]// 3. 创建 router 实例,然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。const router = new VueRouter({ routes // (缩写)相当于 routes: routes})// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由,// 从而让整个应用都有路由功能const app = new Vue({ router}).$mount(‘#app‘)// 现在,应用已经启动了!
三、运行的效果如下:当 <router-link>
对应的路由匹配成功,将自动设置 class 属性值 .router-link-active
。
vue-router的使用二
一、定义一个嵌套的路由,html的代码没有做改变。js里面增加以下的代码:
const Person = { template: ‘<div class="user"><h2>User {{ $route.params.id }}</h2><router-view></router-view></div>‘}const Huhx = { template: ‘<div style="color: red;">my name is huhx.</div>‘}
增加路由的映射,代码如下:
const routes = [{ path: ‘/foo‘, component: Foo}, { path: ‘/bar‘, component: Bar}, { path: ‘/user/:id‘, component: User}, { path: ‘/person/:id‘, component: Person, children: [ { path: ‘huhx‘, component: Huhx } ]}]
运行的效果如下:
模拟一下路由的原理
一、主页面的代码huhx3.html内容如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../jquery-3.1.0.js"></script> <script type="text/javascript" src="js/app3.js"></script></head><body> <ul> <li><a href="#/">首页</a></li> <li><a href="#/product">产品</a></li> <li><a href="#/server">服务</a></li> </ul><div id="content"></div> </body></html>
其中测试中包含的两个碎片页如下:
- page.html:
<div style="color: red">Hello World</div>
- product.html:
<div style="background-color: #CCCCCC; text-shadow: 2px 2px 4px red">I love you.</div>
关于js的代码如下:app3.js
function load() { var url = window.location.href; // get the router var index = url.indexOf("#"); var routeUrl = url.substring(index, url.length); alert("routeUrl: " + routeUrl); // 比较Router对象,加载页面 if (routeUrl == "#/server") { $("#content").load("page.html"); } else if (routeUrl == "#/product") { $("#content").load("product.html"); } else { $("#content").load("<span>huhx</span>"); }}window.addEventListener(‘hashchange‘, function() { load();}, false);
二、运行效果如下:注意到url点击两次,并没有触发hashchange事件。下面我们说一下这个事件,了解这样实现的缺点。
关于路由,请参考博客:https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history
友情链接
- vue-router的文档:http://router.vuejs.org/
Vue基础---->vue-router的使用(一)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。