首页 > 代码库 > Vue基础---->vue-router的使用(一)

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

2024-09-01 13:33:57   217人阅读

　　用 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的使用(一)


联系
我们