学习网址：https://segmentfault.com/blog/vueroad

转载至：https://segmentfault.com/a/1190000009350679#articleHeader5

前言

vue.js除了拥有组件开发体系之外，还有自己的路由vue-router。在没有使用路由之前，我们页面的跳转要么是后台进行管控，要么是用a标签写链接。使用vue-router后，我们可以自己定义组件路由之间的跳转，还可以设置稍复杂的嵌套路由，创建真正的spa（单页面应用）。我之前用vue-cli脚手架写了一个简单的人员管理实例，现在我们不用脚手架，就用原生的vue来写，本文也主要是通过实例来讲解vue.js+vue-router相关知识。

简单路由跳转实例

1.起步

下载vue-router.js，新建项目文件夹命名为router，将下载的vue-router.js放在router/js/路径下。新建index.html作为主页，引入样式文件，引入两个关键的js，vue和vue-router，再在body标签底部引入一个main.js用来写vue实例及配置路由，注意引用顺序。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>首页</title>

    <link rel="stylesheet" href="css/main.css">

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

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

</head>

<body>

     <div id="app"></div>

     <template></template> //组件区域

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

</body>

</html>

2.定义路由视图

调用foot-nav组件，将底部导航组件引入在这里，是因为两个路由页面都要用到它

<div id="app">

    <router-view></router-view>

    <foot-nav></foot-nav>

</div>

知识点:：<router-view>

<router-view>标签相当于一个插槽，用于将匹配到的组件渲染出来，一个个路由定义的组件相当于卡，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示。
一个组件可以有多个<router-view>视图，并用name值去区分它们，这种多用在网页布局方面，如上左主结构，这个时候就可以定义三个<router-view>
示例

<div id="app">

    <router-view name="top"></router-view>

    <router-view name="left"></router-view>

    <router-view name="main"></router-view>

</div>

<script>

    var topCom = Vue.extend({

        template: '<div>顶部</div>'

    })

    var leftCom = Vue.extend({

        template: '<div>侧边栏</div>'

    })

    var mainCom = Vue.extend({

        template: '<div>主页</div>'

    })

    var router = new VueRouter({

        routes:[

            {

                path: '/',

                name: 'home',

                components:{

                    top: topCom,

                    left: leftCom,

                    main: mainCom

                }

            }

        ]

    })

    var app = new Vue({

        el: '#app',

        router

    })

</script>

再为各个板块设置一下样式，打开浏览器查看效果

https://segmentfault.com/img/remote/1460000009350682?w=1006&h=617

3.子组件（底部导航）

3.1 创建子组件

人员管理系统分为两个模块，一个首页，一个管理页，两个页面都需引入一个公共组件：底部导航。在首页index.html中加入以下模板

<template id="footer">

    <div class="footer fixed">

        <ul>

            <li><router-link to="/">首页</router-link></li>

            <li><router-link :to="{name:'manage',params:{id:1}}">人员管理</router-link></li>

        </ul>

    </div>

</template>

知识点:：<router-link>

<router-link>标签主要实现跳转链接功能，属性to='/'即是跳转到path为'/'的路径（我们等会得配置路径为'/'和'/manage'的路由）
router-link除了可以跳转链接之外，还可以传参，可以传多个参数，一般格式为

<router-link to="路由路径"></router-link>

<router-link :to="{ path:路由路径}"></router-link>

<router-link :to="{name:'路由命名',params:{参数名:参数值,参数名:参数值}}"></router-link>

知识点：this.$router.push

如果不想用<router-link>标签，也可以给需要跳转的地方添加一个点击事件，在事件里写this.$router.push方法

this.$router.push('路由路径')

this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})

3.2 注册子组件

在main.js中全局注册子组件并且定义vue实例

Vue.component('foot-nav',{

    template: '#footer'

})

var app = new Vue({

    el: '#app'

})

4.首页及管理页组件

4.1 创建首页及管理页

<template id="index">

    <div>

        首页

    </div>

</template>

<template id="manage">

    <div>

        人员管理

        <p>id:{{id}}</p>

    </div>

</template>

4.2 注册主页及管理页

var Home = Vue.extend({

    template: '#index'

})

var Manage = Vue.extend({

    template: '#manage',

    data(){

        return{

            id: ''

        }

    },

    mounted:function(){

        this.id = this.$route.params.id

    }

知识点：this.$route.params

this.$route指向vue实例的路由，params是路由传过来的参数集合

5.定义路由

定义路由router，并引进vue实例中

var router = new VueRouter({

    routes:[

        {

            path:'/',

            name: 'home',

            component:Home

        },

        {

            path:'/manage/:id',

            name: 'manage',

            component:Manage

        }

    ]

})

var app = new Vue({

    el: '#app',

    router

})

知识点：path:'/路径/:参数名'

一个路由要传参时，需在path路径后面添加一个‘/’并加上冒号和参数名

知识点：路由激活class

vue-router当路由处于激活状态时，会有一个class类“router-link-exact-active”，我们只需为这个类添加样式就可以实现路由激活状态下的样式编写
接下来去浏览器查看路由跳转效果

https://image-static.segmentfault.com/245/317/2453176964-5912b0454d842_articlex

　　　　

前言

vue.js除了拥有组件开发体系之外，还有自己的路由vue-router。在没有使用路由之前，我们页面的跳转要么是后台进行管控，要么是用a标签写链接。使用vue-router后，我们可以自己定义组件路由之间的跳转，还可以设置稍复杂的嵌套路由，创建真正的spa（单页面应用）。我之前用vue-cli脚手架写了一个简单的人员管理实例，现在我们不用脚手架，就用原生的vue来写，本文也主要是通过实例来讲解vue.js+vue-router相关知识。

简单路由跳转实例

1.起步

下载vue-router.js，新建项目文件夹命名为router，将下载的vue-router.js放在router/js/路径下。新建index.html作为主页，引入样式文件，引入两个关键的js，vue和vue-router，再在body标签底部引入一个main.js用来写vue实例及配置路由，注意引用顺序。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>首页</title>

    <link rel="stylesheet" href="css/main.css">

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

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

</head>

<body>

     <div id="app"></div>

     <template></template> //组件区域

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

</body>

</html>

2.定义路由视图

调用foot-nav组件，将底部导航组件引入在这里，是因为两个路由页面都要用到它

<div id="app">

    <router-view></router-view>

    <foot-nav></foot-nav>

</div>

知识点:：<router-view>

<router-view>标签相当于一个插槽，用于将匹配到的组件渲染出来，一个个路由定义的组件相当于卡，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示。
一个组件可以有多个<router-view>视图，并用name值去区分它们，这种多用在网页布局方面，如上左主结构，这个时候就可以定义三个<router-view>
示例

<div id="app">

    <router-view name="top"></router-view>

    <router-view name="left"></router-view>

    <router-view name="main"></router-view>

</div>

<script>

    var topCom = Vue.extend({

        template: '<div>顶部</div>'

    })

    var leftCom = Vue.extend({

        template: '<div>侧边栏</div>'

    })

    var mainCom = Vue.extend({

        template: '<div>主页</div>'

    })

    var router = new VueRouter({

        routes:[

            {

                path: '/',

                name: 'home',

                components:{

                    top: topCom,

                    left: leftCom,

                    main: mainCom

                }

            }

        ]

    })

    var app = new Vue({

        el: '#app',

        router

    })

</script>

再为各个板块设置一下样式，打开浏览器查看效果

https://segmentfault.com/img/remote/1460000009350682?w=1006&h=617

3.子组件（底部导航）

3.1 创建子组件

人员管理系统分为两个模块，一个首页，一个管理页，两个页面都需引入一个公共组件：底部导航。在首页index.html中加入以下模板

<template id="footer">

    <div class="footer fixed">

        <ul>

            <li><router-link to="/">首页</router-link></li>

            <li><router-link :to="{name:'manage',params:{id:1}}">人员管理</router-link></li>

        </ul>

    </div>

</template>

知识点:：<router-link>

<router-link>标签主要实现跳转链接功能，属性to='/'即是跳转到path为'/'的路径（我们等会得配置路径为'/'和'/manage'的路由）
router-link除了可以跳转链接之外，还可以传参，可以传多个参数，一般格式为

<router-link to="路由路径"></router-link>

<router-link :to="{ path:路由路径}"></router-link>

<router-link :to="{name:'路由命名',params:{参数名:参数值,参数名:参数值}}"></router-link>

知识点：this.$router.push

如果不想用<router-link>标签，也可以给需要跳转的地方添加一个点击事件，在事件里写this.$router.push方法

this.$router.push('路由路径')

this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})

3.2 注册子组件

在main.js中全局注册子组件并且定义vue实例

Vue.component('foot-nav',{

    template: '#footer'

})

var app = new Vue({

    el: '#app'

})

4.首页及管理页组件

4.1 创建首页及管理页

<template id="index">

    <div>

        首页

    </div>

</template>

<template id="manage">

    <div>

        人员管理

        <p>id:{{id}}</p>

    </div>

</template>

4.2 注册主页及管理页

var Home = Vue.extend({

    template: '#index'

})

var Manage = Vue.extend({

    template: '#manage',

    data(){

        return{

            id: ''

        }

    },

    mounted:function(){

        this.id = this.$route.params.id

    }

知识点：this.$route.params

this.$route指向vue实例的路由，params是路由传过来的参数集合

5.定义路由

定义路由router，并引进vue实例中

var router = new VueRouter({

    routes:[

        {

            path:'/',

            name: 'home',

            component:Home

        },

        {

            path:'/manage/:id',

            name: 'manage',

            component:Manage

        }

    ]

})

var app = new Vue({

    el: '#app',

    router

})

知识点：path:'/路径/:参数名'

一个路由要传参时，需在path路径后面添加一个‘/’并加上冒号和参数名

知识点：路由激活class

vue-router当路由处于激活状态时，会有一个class类“router-link-exact-active”，我们只需为这个类添加样式就可以实现路由激活状态下的样式编写
接下来去浏览器查看路由跳转效果

https://image-static.segmentfault.com/245/317/2453176964-5912b0454d842_articlex

6.嵌套路由

有时我们项目由多层嵌套组件组成，这个时候就需要用到嵌套路由
先看下图例子，我们给manage路由再添加两个子路由

https://segmentfault.com/img/remote/1460000009350684?w=443&h=497

6.1 在组件内部添加<router-view>

<template id="manage">

    <div>

        人员管理

        <ul>

            <li><router-link to="/manage/list">人员列表</router-link></li>

            <li><router-link to="/manage/edit">编辑</router-link></li>

        </ul>

        <router-view></router-view>

    </div>

</template>

6.2 定义子路由

//构建组件

var List = Vue.extend({

    template: '<div>人员列表</div>'

})

var Edit = Vue.extend({

    template: '<div>编辑</div>'

})

var router = new VueRouter({

    routes:[

        {

            path:'/',

            name: 'home',

            component:Home

        },

        {

            path:'/manage',

            name: 'manage',

            component:Manage,

        //子路由由children表示

            children:[

                {

                    path:'list',

                    name: 'list',

                    component:List

                },

                {

                    path:'edit',

                    name: 'edit',

                    component:Edit

                }

            ]

        }

    ]

})

7.路由重定向

未设置路由重定向时，当我们随意输入一个路径，会显示一片空白或404。为了防止这种现象发生，我们一般在配置路由时再定义一个重定向路由

var router = new VueRouter({

    routes:[

        {

            path:'/',

            name: 'home',

            component:Home

        },

        {

            path:'*',

            redirect: '/'

        },

    ]

})

打开浏览器，随意输入一个未定义的路由查看效果
https://segmentfault.com/img/remote/1460000009350685?w=443&h=632

vue.js路由vue-router的更多相关文章

  1. 使用vue.js路由踩到的一个坑Unknown custom element

    在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...

  2. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  3. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  4. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  5. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  6. vue.js路由参数简单实例讲解------简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...

  7. Vue.js路由

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  8. Vue.js路由详解

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  9. vue.js路由嵌套

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

随机推荐

  1. ping ip多进程处理小程序

    最近,环境维护需要经常需要判断某些服务器上的IP是否可达,由于服务器数量较多,逐一手工ping检查太过繁琐.写个小程序使用. 实现和说明 1.使用配置文件ip.txt实现可配置指定ip列表. 2.利用 ...

  2. 使用Node.JS监听文件夹变化

    使用Node.JS监听文件夹改变有许多应用场合,比如: 构建自动编绎工具 当源文件改变时,自动运行build过程,比如当你写CoffeeScript文件或SASS CSS文件时,保存之后可即时生成对应 ...

  3. 点击li往数组添加对应li的id再点击移除，根据是否有class判断

    if($(this).hasClass('click')){ $(this).removeClass('click'); var idAPP = $(this).attr('id'), index = ...

  4. ArcGIS案例学习笔记-批处理擦除挖空挖除相减

    ArcGIS案例学习笔记-批处理擦除挖空挖除相减 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:批处理擦除.挖空.挖除.相减 数据源:chp13/ex5/pa ...

  5. C#中的 new Random()

    在C#中,产生随机数常用大方法是 new Random().Next(1,10)等方法. 但是仔细发现会有个问题: 看代码: ; i < ;i++ ) { Console.WriteLine(, ...

  6. C#中属性和字段的区别

    属性和字段的区别 在C#中,我们可以非常自由的.毫无限制的访问公有字段,但在一些场合中,我们可能希望限制只能给字段赋于某个范围的值.或是要求字段只能读或只能写,或是在改变字段时能改变对象的其他一些状态 ...

  7. 利用ant脚本 自动构建svn增量/全量 系统程序升级包【转】

    引文:我们公司是做自己使用产品,迭代更新周期短,每次都花费较多时间和精力打包做增量更新,发现了一篇文章用于 自动构建svn增量/全量 系统程序升级包,收藏之,希望可以通过学习,更加简化我们的工作. 文 ...

  8. /src/struts.xml

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC         ...

  9. shiro 基于springmvc中做登陆功能

    1.添加依赖 <!-- shiro --> <dependency> <groupId>org.apache.shiro</groupId> <a ...

  10. 1.1、CDH 搭建Hadoop在安装之前(配置网络名称)

    重要: CDH需要IPv4.不支持IPv6.提示:粘合时,请使用bond0 IP地址,因为它代表所有聚合链接. 按如下方式配置群集中的每个主机,以确保所有成员可以相互通信: 将主机名设置为唯一名称(不 ...