当前位置：Gxlcms > JavaScript > vue路由教程之静态路由

vue路由教程之静态路由

时间：2021-07-01 10:21:17 帮助过：19人阅读

前言

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

首先在html中，引入vue-router.js和vue.js，用router-link触发路由跳转，router-link可以像a标签一样使用和定义样式

router-view区域是路由匹配到的组件渲染的地方

  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  2. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  3.  
  4. <div id="app">
  5.  <h1>Hello App!</h1>
  6.  <p>
  7.  <!-- 使用 router-link 组件来导航. -->
  8.  <!-- 通过传入 `to` 属性指定链接. -->
  9.  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  10.  <router-link to="/foo">Go to Foo</router-link>
  11.  <router-link to="/bar">Go to Bar</router-link>
  12.  </p>
  13.  <!-- 路由出口 -->
  14.  <!-- 路由匹配到的组件将渲染在这里 -->
  15.  <router-view></router-view>
  16. </div>

然后是js代码

首先定义路由组件，组件可以是简单的组件（template简单定义即可），也可是extend定义的复杂组件

接下来定义路由映射表，就是定义路径和组件之间的映射　

然后使用路由映射表创建路由对象　

最后使用路由对象创建vue对象，并挂载到指定元素

  1. // 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
  2.  
  3. // 1. 定义（路由）组件。
  4. // 可以从其他文件 import 进来
  5. const Foo = { template: '<div>foo</div>' }
  6. const Bar = { template: '<div>bar</div>' }
  7.  
  8. // 2. 定义路由
  9. // 每个路由应该映射一个组件。 其中"component" 可以是
  10. // 通过 Vue.extend() 创建的组件构造器，
  11. // 或者，只是一个组件配置对象。
  12. // 我们晚点再讨论嵌套路由。
  13. const routes = [
  14.  { path: '/foo', component: Foo },
  15.  { path: '/bar', component: Bar }
  16. ]
  17.  
  18. // 3. 创建 router 实例，然后传 `routes` 配置
  19. // 你还可以传别的配置参数, 不过先这么简单着吧。
  20. const router = new VueRouter({
  21.  routes // （缩写）相当于 routes: routes
  22. })
  23.  
  24. // 4. 创建和挂载根实例。
  25. // 记得要通过 router 配置参数注入路由，
  26. // 从而让整个应用都有路由功能
  27. const app = new Vue({
  28.  router// （缩写）相当于 router: router
  29. 1
  30. }).$mount('#app') // 现在，应用已经启动了！

上例中，路由映射表实例名为routes，在创建路由对象时可以缩写，如果不叫routes，比如叫routesa，则创建路由对象时必须写routes:routesa

创建vue对象时，路由对象名也一样，如果不叫router，也不能缩写

使用extend创建模板

  1. var todoItem = Vue.extend({
  2.   data: function() {
  3.    return {
  4.     todoData: [
  5.      { id: 0, text: '蔬菜' },
  6.      { id: 1, text: '奶酪' },
  7.      { id: 2, text: '随便其它什么人吃的东西' }
  8.     ]
  9.    };
  10.   },
  11.   template: `
  12.   <ul>
  13.    <li v-for='(d, i) in todoData' :key="i">
  14.     {{ d.text }}
  15.    </li>
  16.   </ul>
  17.  `,
  18.  
  19.  });
  20.  
  21.  
  22.  Home = { template: '<div>foo</div>' }
  23.  About = { template: '<div>bar</div>' }
  24.  
  25.  routes = [
  26.   { path: '/home', component: Home },
  27.   { path: '/about', component: todoItem }
  28.  ]
  29.  
  30.  router = new VueRouter({
  31.   routes:routes // （缩写）相当于 routes: routes
  32.  });
  33.  
  34.  app = new Vue({
  35.   router:router
  36.  }).$mount('#app');

还可以这样写template

  1. <!DOCTYPE html>
  2. <!-- saved from url=(0077)https://keepfool.github.io/vue-tutorials/06.Router/basic/basic_01.html#!/home -->
  3. <html>
  4.  
  5. <head>
  6.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.  <title>abc</title>
  8.  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  9.  <link rel="stylesheet" href="./basic_01_files/custom.css" rel="external nofollow" >
  10. </head>
  11.  
  12. <body>
  13.  <div id="app">
  14.   <div class="row">
  15.    <div class="col-xs-offset-2 col-xs-8">
  16.     <div class="page-header">
  17.      <h2>Router Basic - 01</h2>
  18.     </div>
  19.    </div>
  20.   </div>
  21.   <div class="row">
  22.    <div class="col-xs-2 col-xs-offset-2">
  23.     <div class="list-group">
  24.       
  25.      <router-link class="list-group-item" to="/home">Go to Foo</router-link>
  26.      <router-link class="list-group-item" to="/about">Go to Bar</router-link>
  27.     </div>
  28.    </div>
  29.    <router-view></router-view>
  30.   </div>
  31.  </div>
  32.  <template id="home">
  33.   <div>
  34.    <h1>Home</h1>
  35.    <p>{{msg}}</p>
  36.   </div>
  37.  </template>
  38.  
  39.  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  40.  <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
  41.  <script>
  42.   
  43.  var todoItem = Vue.extend({
  44.   data: function() {
  45.    return {
  46.     todoData: [
  47.      { id: 0, text: '蔬菜' },
  48.      { id: 1, text: '奶酪' },
  49.      { id: 2, text: '随便其它什么人吃的东西' }
  50.     ]
  51.    };
  52.   },
  53.   template: `
  54.   <ul>
  55.    <li v-for='(d, i) in todoData' :key="i">
  56.     {{ d.text }}
  57.    </li>
  58.   </ul>
  59.  `,
  60.  
  61.  });
  62.  
  63.  var t_test = Vue.extend({
  64.   data:function(){
  65.    return {
  66.     msg:"hello,test"
  67.    };
  68.   },
  69.   template:"#home"
  70.  
  71.   }
  72.  
  73.  );
  74.  
  75.  
  76.  
  77.  // Home = { template: '<div>foo</div>' }
  78.  // About = { template: '<div>bar</div>' }
  79.  
  80.  routes = [
  81.   { path: '/home', component: t_test },
  82.   { path: '/about', component: todoItem }
  83.  ]
  84.  
  85.  router = new VueRouter({
  86.   routes: routes // （缩写）相当于 routes: routes
  87.  });
  88.  
  89.  app = new Vue({
  90.   router: router
  91.  }).$mount('#app');
  92.  </script>
  93. </body>
  94.  
  95. </html>

如果不需要固定的导航链接，可以把router-link放在模板里面：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.  <meta charset="UTF-8">
  6.  <title>abc</title>
  7.  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8.  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  9. </head>
  10.  
  11. <body>
  12.  <div id="app">
  13.   <h1>Hello App!</h1>
  14.    
  15.   <!-- 路由出口 -->
  16.   <!-- 路由匹配到的组件将渲染在这里 -->
  17.   <router-view>
  18.    
  19.   </router-view>
  20.  </div>
  21. </body>
  22. <script type="text/javascript">
  23. // 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
  24.  
  25. // 1. 定义（路由）组件。
  26. // 可以从其他文件 import 进来
  27. const Foo = { template: '<router-link to="/bar">Go to Bar</router-link>' }
  28. const Bar = { template: '<router-link to="/foo">Go to Foo</router-link>' }
  29.  
  30. // 2. 定义路由
  31. // 每个路由应该映射一个组件。 其中"component" 可以是
  32. // 通过 Vue.extend() 创建的组件构造器，
  33. // 或者，只是一个组件配置对象。
  34. // 我们晚点再讨论嵌套路由。
  35. const routes = [
  36.  { path: '/foo', component: Foo },
  37.  { path: '/bar', component: Bar }
  38. ]
  39.  
  40. // 3. 创建 router 实例，然后传 `routes` 配置
  41. // 你还可以传别的配置参数, 不过先这么简单着吧。
  42. const router = new VueRouter({
  43.  routes // （缩写）相当于 routes: routes
  44. })
  45.  
  46. // 4. 创建和挂载根实例。
  47. // 记得要通过 router 配置参数注入路由，
  48. // 从而让整个应用都有路由功能
  49. const app = new Vue({
  50.  router // （缩写）相当于 router: router
  51.  
  52. }).$mount('#app') // 现在，应用已经启动了！
  53. </script>
  54.  
  55. </html>

进去的时候打网址

xxx/xx.html#/foo 或 xxx/xx.html#/bar

就可以实现foo和bar模板之间互相跳转

也可以设置默认路由：

  1. const routes = [
  2.  { path: '/', component: Bar },
  3.  { path: '/foo', component: Foo },
  4.  { path: '/bar', component: Bar },
  5.  
  6. ]

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！