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

在src目錄下面新建文件頁面（以Vue結(jié)尾）
文件內(nèi)容

src

user

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

3.png

如何做一個鏈接跳轉(zhuǎn)呢？
在App.vue中添加標簽<router-link to="/hello"></router>就可以跳轉(zhuǎn)至對應(yīng)的頁面

4.png

2.子路由：

App.vue代碼

<p>導(dǎo)航 ：
      <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參數(shù)傳遞

修改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.單頁面多路由區(qū)域操作

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傳參

發(fā)送端
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>內(nèi)容：{{ $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> 

攜帶參數(shù)重定向

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

App

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

6.使用alias別名的形式，我們也可以實現(xiàn)類似重定向的效果。

router

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

App.vue

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