使用VueRouter的前提：

　1， 必须导入vue-router.js文件
    2， 要有VueRouter()实例
    3， 要把VueRouter实例挂载到Vue实例中
　 4， 路由的入口
    　　　　<router-link to='/index'>index页面</router-link>
     5， 路由的出口
    　　　　<router-view></router-view>

第一个VueRouter实例：　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="d1">
  9.         <!--路由的入口-->
  10.         <!--里面必有这个to="路径" 属性-->
  11.         <router-link to="/index">index页面</router-link>
  12.         <router-link to="/home">home页面</router-link>
  13.         <hr>
  14.         <!--路由的出口-->
  15.         <router-view></router-view>
  16.     </div>
  17. </body>
  18. <script src="vue.js"></script>
  19. <script src="VueRouter.js"></script>
  20. <script>
  21.     //写路由
  22.     const routes = [
  23.         {
  24.             path:"/index",
  25.             component:{
  26.               template:`<div>
  27.                             <h1>这是index页面</h1>
  28.                          </div>`,
  29.             },
  30.         },
  31.         //  每一个路由都是一个对象，属性是path:对应的是路径
  32.         // component：里面是template 里的内容将会挂载到页面上。
  33.         {
  34.             path:"/home",
  35.             component:{
  36.                 template:`<div>
  37.                               <h1>这里是home页面</h1>
  38.                            </div>`,
  39.             }
  40.         }
  41.     ];
  42.     // 生成VueRouter示例
  43.     const router_obj = new VueRouter({
  44.         routes:routes
  45.     });
  46.     var app = new Vue({
  47.         el:"#d1",
  48.         data:{},
  49.         router:router_obj    // 将路由实例挂载到Vue实例中
  50.     })
  51. </script>
  52. </html>

路由的模糊匹配：　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="d1">
  9.         <router-link to="/user/清秋?age=17">清秋页面</router-link>
  10.         <router-link to="/user/小白?age=17">小白页面</router-link>
  11.         <!--  ？后跟的会存到一个query中，后面只需要从query中调取就可以了-->
  12.         <hr>
  13.         <router-view></router-view>
  14.     </div>
  15.     <script src="vue.js"></script>
  16.     <script src="VueRouter.js"></script>
  17.     <script>
  18.         const routes = [
  19.             {
  20.                 path:"/user/:name",
  21.                 // :后跟的就是模糊查询的，类似于正则
  22.                 component:{
  23.                     template:`<div>
  24.                                     <h1>这里是{{$route.params.name}}的主页页面！</h1>
  25.                                     <p>他{{$route.query.age}}岁</p>
  26.                                </div>`,
  27.                 }
  28.             },
  29.         ];
  30.         //生成VueRouter实例
  31.         const router_obj = new VueRouter({
  32.             routes:routes
  33.         });
  34.         var app = new Vue({
  35.             el:"#d1",
  36.             data:{},
  37.             router:router_obj  //将路由实例挂载到Vue实例中
  38.         })
  39.     </script>
  40. </body>
  41. </html>

子路由：

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="d1">
  9.         <router-link to="/index/qingqiu">清秋的主页</router-link>
  10.         <hr>
  11.         <router-view></router-view>
  12.     </div>
  13.     <script src="vue.js"></script>
  14.     <script src="VueRouter.js"></script>
  15.     <script>
  16.         const routes = [
  17.             {
  18.               path:"/index/:name",
  19.               component:{
  20.                   template:`<div>
  21.                                  <h1>这里是{{$route.params.name}}的主页</h1>
  22.                                  <hr>
  23.                                  <router-link to="info" append>他喜欢的music</router-link>
  24.                                  <hr>
  25.                                  <router-view></router-view>
  26.                              </div>`,
  27.               //    在父路由里写上子路由的的链接 标签属性里加上append:可以在原有路径的后面追加路径信息
  28.               },
  29.                 children:[
  30.                     {
  31.                         path:"info",
  32.                         component:{
  33.                             template:`<div>
  34.                                             <h1>忘记时间</h1>
  35.                                             <p>沉默着，走了有，多遥远</p>
  36.                                        </div>`,
  37.                         }
  38.                     }
  39.                 ],
  40.             },
  41.         ];
  42.         const router_obj = new VueRouter({
  43.             routes:routes
  44.         });
  45.         var app = new Vue({
  46.             el:"#d1",
  47.             data:{},
  48.             router:router_obj,
  49.         })
  50.     </script>
  51. </body>
  52. </html>

VueRouter的更多相关文章

  1. Vue-Router 页面正在加载特效

    Vue-Router 页面正在加载特效 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染 ...

  2. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  3. Vue.js——vue-router 60分钟快速入门

    概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...

  4. vue-router(2.0)

    用Vue.js+vue-router创建单页应用是比较简单的.使用Vue.js时,我们就已经把组件组合成一个应用了,当你要把vue-router加进来,只要配置组件和路由映射,然后告诉vue-rout ...

  5. vue-router

    官方文档: 旧版:https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn 新版:http://router.vuejs.org/(2.0版本) ...

  6. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

  7. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  8. vue+ vue-router + webpack 踩坑之旅

    说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少 ...

  9. vue-router 创建 vue 单页应用示例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. [Vuejs] 关于vue-router里面的subRoutes

    刚学习vue,可能有使用不对的地方,希望没有对大家造成困扰! 使用vue-router,为了能够更好的管理.vue文件,需要用到子路由. 先看个错误的例子 routers.js '/company': ...

随机推荐

  1. Command（命令）

    意图: 将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤消的操作. 适用性: 抽象出待执行的动作以参数化某对象,你可用过程语言中的回调(call ...

  2. Composite（组合）

    意图: 将对象组合成树形结构以表示“部分-整体”的层次结构.C o m p o s i t e 使得用户对单个对象和组合对象的使用具有一致性. 适用性: 你想表示对象的部分-整体层次结构. 你希望用户 ...

  3. Android之shape与selector实现圆角

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和 ...

  4. Docker和k8s的区别与介绍

    本文来源:鲜枣课堂 2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫“dotCloud”的公司. 这家公司主要提供基于PaaS的云计算技术服务.具体来说,是和LXC有关的容器技术. LXC, ...

  5. socket中 emit和on的写法

    socket.emit('action');表示发送了一个action命令,命令是字符串的,在另一端接收时,可以这么写: socket.on('action',function(){...});soc ...

  6. python学习笔记（一）---python下载以及环境的安装

    转载网址:https://www.runoob.com/python/python-install.html 1.下载python安装包: 安装包下载网址(如下图所在的网址):https://www. ...

  7. 无法安装64位版本的office因为在您的pc

    无法安装64位版本的office因为在您的pcWindows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Installer\Products\00 ...

  8. 设置mysql的字符集

    ALTER DATABASE test DEFAULT CHARACTER SET utf8; show variables like 'char%';  

  9. Laravel框架中Validor中错误信息$error的输出

    @if (count($errors) > 0) <div class="alert alert-danger"> <ul> @foreach ($e ...

  10. idea如何热部署（转）

    IntelliJ IDEA 怎么热部署,每次修改java文件就得重启tomcat  原文链接:http://blog.csdn.net/dandandeshangni/article/details/ ...