VUE学习笔记（四）-路由管理系统

一丶Vue-router的核心文件的基本结构

router/index.js文件解读

import Vue from 'vue'  //引入Vue

import Router from 'vue-router'  //引入Vue-router

import HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件

import Hi from '@/components/Hi'     

Vue.use(Router) //Vue全局使用的Router

export default new Router({

  routes: [                    //配置路由，这里是个数组

    {

      path: '/',               //链接路径

      name: 'HelloWorld',     //路由名称

      component: HelloWorld    //对应的组件模板

    },{
      path: '/Hi',
      name: 'Hi',
      component:Hi

    }
  ]

})

router-link 标签

作用：导航

<p>导航 ：

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

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

</p>

to的作用：导航路径

---

二丶子路由

例：

一丶将Hi.vue改成一个通用的模板，加入<router-view> 标签

二丶

将子路由在配置中加入children字段

{

  path:'/Hi',

  name:'Hi',

  component:Hi,

  children:[

    {path:'/', name:'Hi', component:Hi},

    {path:'H1', name:'H1', component:H1},

    {path:'H2', name:'H2', component:H2},

    {path:'H3', name:'H3', component:H3},

  ]

}

Vue-router传参：

方法一：

使用nam传参，<router-link></router-link>中的name和index.js中的name一致

输出：{{$router.name}}

方法二：

<router-link></router-link> ：to绑定 

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

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

• name：就是我们在路由配置文件中起的name值。
• params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

输出：{{$route.params.username}}

---

三丶单页面多路由操作

<router-view ></router-view>

<router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>

<router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>

import Vue from 'vue'

import Router from 'vue-router'

import Hello from '@/components/Hello'

import Hi1 from '@/components/Hi1'

import Hi2 from '@/components/Hi2'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      components: {

        default:Hello,

        left:Hi1,

        right:Hi2

      }

    },{

      path: '/Hi',

      components: {

        default:Hello,

        left:Hi2,

        right:Hi1

      }

    }

  ]

})

Hi1.vue

<template>

    <div>

        <h2>{{ msg }}</h2>

    </div>

</template>

<script>

export default {

  name: 'hi1',

  data () {

    return {

      msg: 'I am Hi1 page.'

    }

  }

}

</script>

Hi2.vue

<template>

    <div>

        <h2>{{ msg }}</h2>

    </div>

</template>

<script>

export default {

  name: 'hi2',

  data () {

    return {

      msg: 'I am Hi2 page.'

    }

  }

}

</script>

---

五丶利用Url传参

在路由配置中利用 ：冒号的形式传递参数

在绑定的参数可以加入正则，来判断

{

     path:'/params/:Id()/:Title'

}

取值：vue组件

<template>

  <div class="hello">

  <h1>{{ msg }}</h1>

  <p>newsId:{{ $route.params.newsId}}</p>  --利用路由取值

  </div>

</template>

<script>

  export default {

  data () {

  return {

  msg: 'params pages'

  }

  }

  }

</script>

传递参数：利用url路径

<router-link to="/Params/123/hello_params">Params</router-link>

---

六：重定向

在路由配置下，加入

{

  path:'/Hi1/:newsId/:newsTitle',

  redirect:'/Params/:newsId/:newsTitle'

}

---

Demo实例： Vue-demo实例