Vue-router learning01

Posted 2020-09-30 墨.眉

概述：vue-router 是WebApp链接路径管理系统。

安装 vue-router

npm install vue-router --save-dev

路由文件 router/index.js：

import Vue from \'vue\'                    //引入Vue
import Router from \'vue-router\'          //引入vue-router
import Hello from \'@/components/Hello\'   //引入Hello.vue组件

Vue.use(Pouter)  //全局使用router
export default new Router({
  routes: [
    {                    //每一个链接都是一个对象
      path: \'/\', 
      name: \'Hello\',     //路由名称
      component: Hello   //对应的组件模板
    }
  ]
})

添加文件components/demo.vue：

<template>
    <div class="demo">
        <h4>{{ msg }}</h4>
    </div>
</template>

<script>
    export default {
        name: \'demo\',
        data() {
            return {
                 msg: \'Hello I am demo.vue\'        
            }
        }
    }
</script>

引入demo组件：

import demo from ‘@components/demo\'

配置路由：

{
 path: \'/demo\',
 name: \'demo\'
 component: demo        
}

通过以上操作，我们就有了两个页面，通过改变地址栏可以看到 hello.vue 页面的内容和 demo.vue 页面的内容，接下来我们来实现导航制作。

制作导航：

<router-link to=\'path\'>导航文字</router-link>

path为index.js中配置的path值。

通过以上代码，我们算是了解了vue-router的基本用法，接下来我们认识子菜单的路由方法。

在App.vue页面进行代码编写：

<p>导航 ：
      <router-link to="/">首页</router-link> | 
      <router-link to="/dmoe">dmoe页面</router-link> |
      <router-link to="/demo/Cdemo">Cdemo页面</router-link> |
</p>

接下来编写demo页面：

<template>
    <div class="demo">
        <h4>{{ msg }}</h4>

        <router-view class=\'Cdemo\'><router-view>
    </div>
</template>

<script>
    export default {
        name: \'demo\',
        data() {
            return {
                 msg: \'Hello I am demo.vue\'        
            }
        }
    }
</script>

router-view 给子模版提供插入的位置。

新建Cdemo组件模板：

<template>
  <div class="Cdemo">
    <h4>{{ msg }}</h4>
  </div>
</template>
<script>
export default {
  name: \'Cdemo\',
  data () {
    return {
      msg: \'Hello I amCdemo\'
    }
  }
}

引入Cdemo：

import Cdemo from \'@comonents/Cdemo\'

配置路由，由于Cdemo为子路由，在原有的路由配置下加入children字段：

children: {
 {path: \'/\',component: Cdemo}
 {path: \'Cdemo\',component: Cdemo} 
}

子路由在现实中使用还是比较常用的，需要熟练的掌握。

vue-router参数传递:

name传值并被显示在模板里，路由文件中路由配置的name属性在模板中用 $router.name 接收：

<p>{{ $route.name}}</p>

<router-link>标签中的to属性传值：

<router-link :to="{name:xxx,params:{key:value}}">link</router-link>

此处需要注意to要进行绑定。name：路由配置文件中的name值。params：要传递的参数。

编写App.vue页面：

<router-link :to="{name:\'Cdemo\',params:{username:\'momei\'}}">Cdemo</router-link>

修改路由配置：

{path:\'/Cdemo\',name:\'Cdemo\',component:Cdemo},

完成上面的操作之后在Cdemo.vue中进行接收。

{{$route.params.username}}

额页面输出momei。

多路由区域操作

建立一个新项目，打开App.vue用router-view标签进行布局。

<router-view ></router-view>
<router-view class="fl_nav" name="left"></router-view>
<router-view class="fr_nav" name="right"></router-view>

页面各部分引入路由：

import Hi1 from \'@/components/Hi1\'
import Hi2 from \'@/components/Hi2\'

配置路由：

routes: [
    {
      path: \'/\',
      components: {
        default:Hello,
        left:Hi1,
        right:Hi2
      }
    },{
      path: \'/Hi\',
      components: {
        default:Hello,
        left:Hi2,
        right:Hi1
      }
    } 
  ]

‘/’根路径，‘/Hi’路径，components中，我们对三个区域定义了现实内容。

Hi1.vue页：

<template>
    <div>
        <h4>{{ msg }}</h4> 
    </div>
</template>
 
<script>
export default {
  name: \'hi1\',
  data () {
    return {
      msg: \'I am Hi1 page.\'
    }
  }
}
</script>

Hi2.vue页：

<template>
    <div>
        <h4>{{ msg }}</h4>
    </div>
</template>
 
<script>
export default {
  name: \'hi2\',
  data () {
    return {
      msg: \'I am Hi2 page.\'
    }
  }
}
</script>

在App.vue中配置link：

<router-link to="/">首页</router-link> | 
<router-link to="/hi">Hi页面</router-link> |

vue-router url的参数传递

：冒号的形式传递参数：首先配置index.js路由

{
    path:\'/params/:name/:cnblogs\',
     component:Params
}

新建Params组件，页面中输出name和cnblogs

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>网名：{{ $route.params.name}}</p>
        <p>博客：{{ $route.params.cnblogs}}</p>
    </div>
</template>
 
<script>
export default {
  name: \'params\',
  data () {
    return {
      msg: \'params page\'
    }
  }
}
</script>

App.vue加入<router-link>标签，利用url传值。

<router-link to="/params/墨 眉/http://www.cnblogs.com/momei/">params</router-link> |