Vue-router 学习笔记

 

 

一、vue-router配置子路由

src/router/index.js文件解析

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件
 
Vue.use(Router)  //Vue全局使用Router
 
export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }
  ]
})

增加一个Hi页面：1.在components下新建Hi.vue文件（其中的<router-view/>是为了后面加入俩子页面Hi1.vue,Hi2.vue使用），完整代码

<template>
    <div class="Hi">
        <h1>{{msg}}</h1>
    <router-view/>
    </div>
</template>
<script>
export default {
    name: 'hi',
    data() {
        return {
            msg: 'hi, I am zhouhong'
        }
    },
}
</script>

     2.在index.js里面import该文件，并添加路由，核心代码

import Hi from '@/components/Hi'

routes: [

{

path: '/',

name: 'Hello',

component: Hello

},

{

path: '/hi',

component: Hi,

}]

至此，Hi新页面建立完成，再在App.vue里面加入Hi页面的链接即可

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

配置Hi页面的两个子页面Hi1.vue,Hi2.vue也是一样操作：

1.App.vue里面router-link两个页面的链接，完整代码：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link to="/">首页</router-link>
    <router-link to="/hi">Hi页面</router-link>
    <router-link to="/hi/hi1">Hi1页面</router-link>
    <router-link to="/hi/hi2">Hi2页面</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.在components下面复制Hi.vue新建两个文件Hi1.vue,Hi2.vue

3.在index.js下引入该俩页面，完整代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/hi',
      component: Hi,
      children: [
        {
          path: '/',
          component: Hi
        },
        {
          path: 'hi1',
          component: Hi1
        },
        {
          path: 'hi2',
          component: Hi2
        }
      ]
    }
  ]
})

二、vue-router传参

1.使用name传参

这种方法在项目开发中不常用

它两步完成用name传值并显示在模板里：

1. 1 在路由文件src/router/index.js里配置name属性。

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
 ]

1. 2 模板里(src/App.vue)用$route.name的形势接收，比如直接在模板中显示：

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

2.通过<router-link> 标签中的to传参 

2.1 在src/reouter/index.js文件里面给Hi.vue文件命名，核心代码：

        {
          path: 'hi1',
          name: 'hi1',
          component: Hi1
        },

2.2 在src/App.vue文件里面修改到Hi1.vue页面的router-link标签，核心代码：

<router-link :to="{name:'hi1',params:{username:'fish',age:'22'}}">Hi1页面</router-link>

2.3 在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

    <div class="Hi1">
        <h1>{{msg}}--{{$route.params.username}}--{{$route.params.age}}</h1>
    </div>

效果图：

三、单页面多路由区域操作

1.新建src/components/Hi1.vue，src/components/Hi2.vue，完整代码：

<template>
    <div class="Hi1">
        <h1>{{msg}}</h1>
    </div>
</template>
<script>
export default {
    name: 'hi1',
    data() {
        return {
            msg: 'hi, I am hi1'
        }
    },
}
</script>

2.在src/App.vue文件添加多个router-view，完整代码：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <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:#fff;height:300px;"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3.在src/reouter/index.js文件引入Hi1.vue,Hi2.vue并注册组件，多个组件记得使用components，完整代码：

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
      }
    }
  ]
})

四、vue-router利用url传参

1.新建src/components/Params.vue文件

2.在src/reouter/index.js文件引入Params.vue并注册组件，在这里注意path要 :冒号的形式传递参数 ** 我们可以在理由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。完整代码：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Params from '@/components/Params'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component:Hello
    },
    {
      path: '/params/:name/:age',
      component: Params
    }

  ]
})

3.在src/App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了。完整代码：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <br/>
    <router-link to="/">首页</router-link>
    <router-link to="/params/cat/23">Params</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

最后在Params.vue里面使用$route.params.参数名 获取参数。完整代码：

<template>
    <div class="Params">
        <h1>{{msg}}</h1>
        <p>传值:{{$route.params.name}}--{{$route.params.age}}</p>
    </div>
</template>
<script>
export default {
    name: 'Params',
    data() {
        return {
            msg: 'hi, I am Params'
        }
    },
}
</script>

五、vue-router的重定向 redirect

1.在src/reouter/index.js文件中把原来的component换成redirect参数就可以，完整代码：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Params from '@/components/Params'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component:Hello
    },
    {
      path: '/params/:name/:age',
      component: Params
    },
    {
      path: '/goBack',// 第一种重定向方法
      redirect: '/'
    },
    {
      path: '/goParams/:name/:age', // 第二种重定向方法
      redirect: '/params/:name/:age'
    }

  ]
})

2.在src/App.vue文件里加入router-link标签，完整代码：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <br/>
    <router-link to="/">首页</router-link>
    <router-link to="/params/cat/23">Params</router-link>
    <router-link to="/goBack">goBack</router-link>
    <router-link to="/goParams/haha/12">goParams</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

六、别名alias

别名请不要用在path为’/’中，如下代码的别名是不起作用的。

{
  path: '/',
  component: Hello,
  alias:'/home'
}

七、路由中的钩子函数和 编程式导航（略）