使用VueRouter的前提：

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

第一个VueRouter实例：　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="d1">

        <!--路由的入口-->

        <!--里面必有这个to="路径" 属性-->

        <router-link to="/index">index页面</router-link>

        <router-link to="/home">home页面</router-link>

        <hr>

        <!--路由的出口-->

        <router-view></router-view>

    </div>

</body>

<script src="vue.js"></script>

<script src="VueRouter.js"></script>

<script>

    //写路由

    const routes = [

        {

            path:"/index",

            component:{

              template:`<div>

                            <h1>这是index页面</h1>

                         </div>`,

            },

        },

        //  每一个路由都是一个对象，属性是path:对应的是路径

        // component：里面是template 里的内容将会挂载到页面上。

        {

            path:"/home",

            component:{

                template:`<div>

                              <h1>这里是home页面</h1>

                           </div>`,

            }

        }

    ];

    // 生成VueRouter示例

    const router_obj = new VueRouter({

        routes:routes

    });

    var app = new Vue({

        el:"#d1",

        data:{},

        router:router_obj    // 将路由实例挂载到Vue实例中

    })

</script>

</html>

路由的模糊匹配：　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="d1">

        <router-link to="/user/清秋?age=17">清秋页面</router-link>

        <router-link to="/user/小白?age=17">小白页面</router-link>

        <!--  ？后跟的会存到一个query中，后面只需要从query中调取就可以了-->

        <hr>

        <router-view></router-view>

    </div>

    <script src="vue.js"></script>

    <script src="VueRouter.js"></script>

    <script>

        const routes = [

            {

                path:"/user/:name",

                // :后跟的就是模糊查询的，类似于正则

                component:{

                    template:`<div>

                                    <h1>这里是{{$route.params.name}}的主页页面！</h1>

                                    <p>他{{$route.query.age}}岁</p>

                               </div>`,

                }

            },

        ];

        //生成VueRouter实例

        const router_obj = new VueRouter({

            routes:routes

        });

        var app = new Vue({

            el:"#d1",

            data:{},

            router:router_obj  //将路由实例挂载到Vue实例中

        })

    </script>

</body>

</html>

子路由：

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="d1">

        <router-link to="/index/qingqiu">清秋的主页</router-link>

        <hr>

        <router-view></router-view>

    </div>

    <script src="vue.js"></script>

    <script src="VueRouter.js"></script>

    <script>

        const routes = [

            {

              path:"/index/:name",

              component:{

                  template:`<div>

                                 <h1>这里是{{$route.params.name}}的主页</h1>

                                 <hr>

                                 <router-link to="info" append>他喜欢的music</router-link>

                                 <hr>

                                 <router-view></router-view>

                             </div>`,

              //    在父路由里写上子路由的的链接 标签属性里加上append:可以在原有路径的后面追加路径信息

              },

                children:[

                    {

                        path:"info",

                        component:{

                            template:`<div>

                                            <h1>忘记时间</h1>

                                            <p>沉默着，走了有，多遥远</p>

                                       </div>`,

                        }

                    }

                ],

            },

        ];

        const router_obj = new VueRouter({

            routes:routes

        });

        var app = new Vue({

            el:"#d1",

            data:{},

            router:router_obj,

        })

    </script>

</body>

</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. 递归--练习2--noi6261汉诺塔

    递归--练习2--noi6261汉诺塔 一.心得 先把递推公式写出来,会很简单的 二.题目 6261:汉诺塔问题 总时间限制:  1000ms 内存限制:  65536kB 描述 约19世纪末,在欧州 ...

  2. UVA-140 Bandwidth （回溯+剪枝）

    题目大意:求一个使带宽最小的排列和最小带宽.带宽是指一个字母到其相邻字母的距离最大值. 题目分析:在递归生成全排列的过程中剪枝,剪枝方案还是两个.一.当前解不如最优解优时,减去:二.预测的理想解不必最 ...

  3. linux-mint下搭建android,angularjs,rails,html5开发环境

    目录[-] 必备软件: 环境配置: [open-jdk-6.0] [android-sdk] [ant] [github] [node.js] [rvm](ruby-1.9.3 rails-4.0.0 ...

  4. div固定顶部和底部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. WCF 学习文摘

    WCF:Windows Communication Foundation 1.概念 WCF是一个用于搭建面向服务的框架,可以通过它从一个服务终端以异步消息的方式发送数据到其他服务: WCF是一个基于消 ...

  6. HTML 代码常用技巧

    IE Javascript快捷键操作 . oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table bo ...

  7. 『转』Dr.Web Security Space 8 – 免费3个月

    简短的测试五个问题,任意回答问题,都将获得Dr.Web Security Suite 3个月免费许可证以及大蜘蛛企业安全套件2个月来保护整个公司!活动地址:https://www.drweb.com/ ...

  8. 二、深度解析HTML5之视频播放和音频播放

    一:视频播放 传统的视频音频播放是通过flash插件的形式完成,不是所有的浏览器都安装了flash插件,而且手机端不支持flash,这就导致视频和音频的播放会有很大的麻烦. 于是,HTML5增加音频和 ...

  9. iOS语法糖 简单却不那么简单

    转载作者 香蕉大大 (Github) 开发过程中我特别喜欢用语法糖,原因很简单,懒得看到一堆长长的代码,但是语法糖我今天无意中看到更有意思的玩法.这里暂时吧把今天新学到的知识点整理一下希望大家喜欢,如 ...

  10. python 机器学习库 —— featuretools（自动特征工程）

    文档:https://docs.featuretools.com/#minute-quick-start 所谓自动特征工程,即是将人工特征工程的过程自动化.以 featuretools 为代表的自动特 ...