Vue-router学习笔记1

1.如何在Vue-cli脚手架中增加子页面?

在src目录下面新建文件页面（以Vue结尾）
文件内容

src
user

然后在router文件夹下的index.js中修改引入，模板，修改路由值

3.png
现在在地址连后面添加hello就可以看到i am hello的字样了

如何做一个链接跳转呢？
在App.vue中添加标签<router-link to="/hello"></router>就可以跳转至对应的页面

4.png

2.子路由：

App.vue代码

<p>导航 ：
      <router-link to="/">首页</router-link> | 
      <router-link to="/hi">Hi页面</router-link> |
      <router-link to="/hi/hi1">-Hi页面1</router-link> |
      <router-link to="/hi/hi2">-Hi页面2</router-link>    /*要把父亲的路径给带上*/
</p>

组件中hi.VUE中

  <div class="hello">
    <router-view></router-view>    /*给子路由展示位置*/
  </div>

新建两个子组件，配置路由

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

3.Vue-router参数传递

修改APP.vue代码

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link to="/">我是首页</router-link>  |
    <router-link to="/hello">Hi页面</router-link> |
    <router-link :to="{name:'hi1',params:{username:'zhengsongjun'}}">Hi页面下面的第一个子页面</router-link> |
    <router-link to="/hello/hi2">Hi页面下面的第二个子页面</router-link> 
    <router-view/>
  </div>
</template>

router.js代码

{
      path:'/hello',
      component:Hello,
      children:[
        {path:'/hello',name:"hello",component:Hello},
        {path:'hi1',name:"hi1",component:Hi1},
        {path:'hi2',name:"hi2",component:Hi2},
      ]
    }

hi1.vue代码

<template>
    <div class="hello">
      <h1>{{ msg }}</h1>
      <p>{{$route.params.username}} </p>
    </div>
  </template>

4.单页面多路由区域操作

App.vue代码

<template>
  <div id="app">
    <router-link to="/">首页</router-link> | 
    <router-link to="/hello">相反</router-link> |     
    <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"/>
    <router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"/>
  </div>
</template>

router下的index.js

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components: {
        left:Hi1,
        right:Hi2,
      }
    },{
      path: '/hello',
      name: 'HelloWorld',
      components: {
        left:Hi2,
        right:Hi1,
      }
    }
  ]
})

5.通过url传参

发送端
router>index.js代码

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    },{
      path:'/hi1/:newsId/:newsTitle',
      component:Hi1
    }
  ]
})

App.vue代码

<router-link to="/params/198/jspang">params</router-link>

params代码

<template>
    <div class="params">
      <h1>{{ msg }}</h1>
      <p>标题：{{ $route.params.newsId }}</p>
      <p>内容：{{ $route.params.newsTitle }}</p>
    </div>
  </template>

5.重定向

router

{
      path:'/goHome',
      redirect:'/'
    }

App

    <router-link to="/">首页</router-link> | 
    <router-link to="/params/198/jspang">params</router-link> |
    <router-link to="/goHome">首页</router-link> 

携带参数重定向

{
      path:'/goParams/:newsId/:newsTitle',
      redirect:'/params/:newsId/:newsTitle'
    }

App

    <router-link to="/params/166/zhengsongjun">重定向</router-link>

6.使用alias别名的形式，我们也可以实现类似重定向的效果。

router

{
      path: '/hi2',
      component:Hi2,
      alias:'/zhengsongjun'
    }

App.vue

    <router-link to="/hi2">hi2</router-link>
    <router-link to="/zhengsongjun">郑宋君</router-link>