zoukankan      html  css  js  c++  java
  • vue.js路由vue-router(一)——简单路由基础

    前言

    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实例及配置路由,注意引用顺序。

     
     1 <!DOCTYPE html>
     2  
     3 <html lang="en">
     4  
     5 <head>
     6  
     7 <meta charset="UTF-8">
     8  
     9 <title>首页</title>
    10  
    11 <link rel="stylesheet" href="css/main.css">
    12  
    13 <script src="js/vue.js"></script>
    14  
    15 <script src="js/vue-router.js"></script>
    16  
    17 </head>
    18  
    19 <body>
    20  
    21 <div id="app"></div>
    22  
    23 <template></template> //组件区域
    24  
    25 <script src="js/main.js"></script>
    26  
    27 </body>
    28  
    29 </html>

    2.定义路由视图

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

     
    1 <div id="app">
    2  
    3 <router-view></router-view>
    4  
    5 <foot-nav></foot-nav>
    6  
    7 </div>

    知识点::<router-view>

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

     
     1 <div id="app">
     2  
     3 <router-view name="top"></router-view>
     4  
     5 <router-view name="left"></router-view>
     6  
     7 <router-view name="main"></router-view>
     8  
     9 </div>
    10  
    11  
    12  
    13 <script>
    14  
    15 var topCom = Vue.extend({
    16  
    17 template: '<div>顶部</div>'
    18  
    19 })
    20  
    21  
    22  
    23 var leftCom = Vue.extend({
    24  
    25 template: '<div>侧边栏</div>'
    26  
    27 })
    28  
    29  
    30  
    31 var mainCom = Vue.extend({
    32  
    33 template: '<div>主页</div>'
    34  
    35 })
    36  
    37  
    38  
    39 var router = new VueRouter({
    40  
    41 routes:[
    42  
    43 {
    44  
    45 path: '/',
    46  
    47 name: 'home',
    48  
    49 components:{
    50  
    51 top: topCom,
    52  
    53 left: leftCom,
    54  
    55 main: mainCom
    56  
    57 }
    58  
    59 }
    60  
    61 ]
    62  
    63 })
    64  
    65  
    66  
    67 var app = new Vue({
    68  
    69 el: '#app',
    70  
    71 router
    72  
    73 })
    74  
    75 </script>

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

    3.子组件(底部导航)

    3.1 创建子组件

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

     
     1 <template id="footer">
     2  
     3 <div class="footer fixed">
     4  
     5 <ul>
     6  
     7 <li><router-link to="/">首页</router-link></li>
     8  
     9 <li><router-link :to="{name:'manage',params:{id:1}}">人员管理</router-link></li>
    10  
    11 </ul>
    12  
    13 </div>
    14  
    15 </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实例

     
     1 Vue.component('foot-nav',{
     2  
     3 template: '#footer'
     4  
     5 })
     6  
     7  
     8  
     9 var app = new Vue({
    10  
    11 el: '#app'
    12  
    13 })

    4.首页及管理页组件

    4.1 创建首页及管理页

     
     1 <template id="index">
     2  
     3 <div>
     4  
     5 首页
     6  
     7 </div>
     8  
     9 </template>
    10  
    11 <template id="manage">
    12  
    13 <div>
    14  
    15 人员管理
    16  
    17 <p>id:{{id}}</p>
    18  
    19 </div>
    20  
    21 </template>

    4.2 注册主页及管理页

     
     1 var Home = Vue.extend({
     2  
     3 template: '#index'
     4  
     5 })
     6  
     7  
     8  
     9 var Manage = Vue.extend({
    10  
    11 template: '#manage',
    12  
    13 data(){
    14  
    15 return{
    16  
    17 id: ''
    18  
    19 }
    20  
    21 },
    22  
    23 mounted:function(){
    24  
    25 this.id = this.$route.params.id
    26  
    27 }
    28  
    29 })

    知识点:this.$route.params

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

    5.定义路由

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

     
     1 var router = new VueRouter({
     2  
     3 routes:[
     4  
     5 {
     6  
     7 path:'/',
     8  
     9 name: 'home',
    10  
    11 component:Home
    12  
    13 },
    14  
    15 {
    16  
    17 path:'/manage/:id',
    18  
    19 name: 'manage',
    20  
    21 component:Manage
    22  
    23 }
    24  
    25 ]
    26  
    27 })
    28  
    29  
    30  
    31 var app = new Vue({
    32  
    33 el: '#app',
    34  
    35 router
    36  
    37 })

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

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

    知识点:路由激活class

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

    6.嵌套路由

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

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

     
     1 <template id="manage">
     2  
     3 <div>
     4  
     5 人员管理
     6  
     7 <ul>
     8  
     9 <li><router-link to="/manage/list">人员列表</router-link></li>
    10  
    11 <li><router-link to="/manage/edit">编辑</router-link></li>
    12  
    13 </ul>
    14  
    15 <router-view></router-view>
    16  
    17 </div>
    18  
    19 </template>

    6.2 定义子路由

     
     1 //构建组件
     2  
     3 var List = Vue.extend({
     4  
     5 template: '<div>人员列表</div>'
     6  
     7 })
     8  
     9  
    10  
    11 var Edit = Vue.extend({
    12  
    13 template: '<div>编辑</div>'
    14  
    15 })
    16  
    17  
    18  
    19  
    20  
    21  
    22  
    23 var router = new VueRouter({
    24  
    25 routes:[
    26  
    27 {
    28  
    29 path:'/',
    30  
    31 name: 'home',
    32  
    33 component:Home
    34  
    35 },
    36  
    37 {
    38  
    39 path:'/manage',
    40  
    41 name: 'manage',
    42  
    43 component:Manage,
    44  
    45 //子路由由children表示
    46  
    47 children:[
    48  
    49 {
    50  
    51 path:'list',
    52  
    53 name: 'list',
    54  
    55 component:List
    56  
    57 },
    58  
    59 {
    60  
    61 path:'edit',
    62  
    63 name: 'edit',
    64  
    65 component:Edit
    66  
    67 }
    68  
    69 ]
    70  
    71 }
    72  
    73 ]
    74  
    75 })

    7.路由重定向

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

     1  
     2 var router = new VueRouter({
     3  
     4 routes:[
     5  
     6 {
     7  
     8 path:'/',
     9  
    10 name: 'home',
    11  
    12 component:Home
    13  
    14 },
    15  
    16 {
    17  
    18 path:'*',
    19  
    20 redirect: '/'
    21  
    22 },
    23  
    24 ]
    25  
    26 })

    打开浏览器,随意输入一个未定义的路由查看效果

  • 相关阅读:
    MySQL用户管理
    linux下杀死进程(kill)的N种方法
    Windows查看某个端口被谁占用
    SQL语句
    CentOS6.5 安装mysql-5.7.9
    Linux服务器安全之用户密钥认证登录
    Linux添加/删除用户和用户组
    linux命令killall 、kill 、pkill 命令详解
    linux下cat命令详解
    linux之sed用法
  • 原文地址:https://www.cnblogs.com/weifeng123/p/9876429.html
Copyright © 2011-2022 走看看