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

Vue基础---->vue-router的使用(一)

2017-01-18 14:49 876 查看

　　用 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/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航