vue-router初涉

概念：

vue-router： vue官方路由插件。

路由： 指單頁面應用的路徑管理系統。在vue中都是單頁應用，至關於只有一個index.html頁面，因此沒法使用<a>標籤，咱們使用路由來管理插件路徑。

 

安裝：

 

npm install vue-router --save-dev   //--save-dev命令直接將依賴包信息寫入packege.json文件中  --save寫在dependencies  -dev寫在devDependencies對象下

 

先看一個vue-cli生成模板中router的實現：

在main.js入口文件中，導入路由文件 router文件夾下的 index.js 和主組件 App.vue；   在index.js中定義路由配置；   在App.vue中渲染配置的組件，由於渲染節點 #app 在main.js中已經綁定。

          

 

          

 

一、定義路由

//導入組件並命名組件名稱
import Hello from '../components/Hello.vue'

//定義路由
const mroutes=[
  {path:'/Hello', //連接路徑
   name:'Hello', //路由名稱
   component:Hello}, //對應的組件名稱
]

//在Router下注冊組件
export default new Router({
  routes:mroutes
})

//掛載到根實例
const app=new Vue({
  el:'#app'
  router
})

//切換路由 經過to指定要去的路由
<router-link to='/Hello'>跳轉到哈嘍</router-link>

二、子路由配置

import all from '../components/all.vue'

import h1 from '../components/h1.vue'

import h2 from '../components/h2.vue'

const router1={
      path: '/all',
      name: 'all',
      component: all,
      children:[ //配置子路由字段
        {
          path:'h1',  //子路由1
          component:h1
        },{
          path:'h2',  //子路由2
          component:h2
        }
      ]
   }

在all.vue中添加<router-view>標籤，讓子路由有地方渲染

<template>
  <div>
    <h2>all 組件</h2>
    <router-view></router-view>
  </div>
</template>


//添加通往子路由的入口
<router-link to='/h1'>子路由一</router-link>
<router-link to='/h2'>子路由二</router-link>

三、vue-router參數傳遞

3.一、直接在url中傳參：

//定義路由
    {
      path: '/hello',
      name: 'hello',
      component: hello
    }, {
      path: '/person/:userName/:userPwd',
      name: 'person',
      component: person
    }

//傳遞參數
<template>
  <div>
    <h2>url 傳參</h2>
    <router-link to="/hello/靜靜是小花/123456">用戶信息</router-link>
  </div>
</template>


//使用參數
<template>
  <div>
    <h2>接收 url 參數</h2>
    <p>用戶名：{{$route.params.userName}}</p>
    <p>用戶名：{{$route.params.userPwd}}</p>
  </div>
</template>

3.二、經過name傳參，也就是路由中定義的name標籤

//使用name
<p> {{$.router.name}} </p>

3.三、使用to傳參

//name是路由中定義的name  params是要傳的參數
<router-link :to="{name:'person',params:{userName:'靜靜是小花',userPwd:'123456'}">進入我的信息頁</router-link>

//還有一種寫法
<router-link :to="{name:'person',query:{userName:'靜靜是小花',userPwd:'123456'}">進入我的信息頁</router-link>

//使用
{{$route.params.userName}}
{{$route.query.userPwd}}

四、單頁面多路由配置

//配置路由
import person from '@/components/personal.vue'
import son1 from '@/components/son1.vue'
import son2 from '@/components/son2.vue'

   {
      path: '/person/:userName/:userPwd',
      name: 'person',
      component:{
        default:person,
        left:son1,
        right:son2
      }

//在頁面中再添加兩個標籤
<router-link>我的信息總路由</router-link>
<router-view name='son1'>路由一</router-view>
<router-view name='son2'>路由二</router-view>

//配置router-link
<router-link to='/person'></router-link>

五、路由重定向

 //重定向路由
{
      path: '/',
      component: Hello
    },{
      path:'/goback',   //重定向標籤
      redirect:'/'  //重定向標籤 重定向到了hello組件
    }

//使用重定向
<router-link to='/goback'>重定向到首頁</router-link>

帶參重定向

{
      path: '/person/:name/:pwd',
      component: Hello
    },{
      path:'/goback/:name/:pwd',
      redirect:'/person/:name/:pwd'   //額 徹底複製了上面的path...
    }

六、別名使用

{ path: '/a',
 component: A,
 alias: '/b' //別名
}

//使用路由別名
<router-link to='/b'></router-link>

七、路由中的鉤子函數

//路由中配置鉤子
{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params,
      beforeEnter:(to,from,next)=>{
        console.log('我進入了params模板');
        console.log(to); //to路由將要跳轉的路徑信息，一個對象
        console.log(from);//路徑跳轉前的路徑信息，一個對象
        next();
}

//模板中配置鉤子
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("準備進入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("準備離開路由模板");
    next();
  }
}

八、編程式導航（在業務邏輯中完成導航）

//綁定函數
<button @click='goBack'>後退</button>
<button @click='goHead'>前進</button>
<button @click='login'>回到首頁</button>

//script中編寫
<script>
export default{
  name:'app',
  methods:{
   goBack(){
      this.$router.go(-1)  //返回前一頁
    },
    goHead(){
      this.$router.go(1)  //相似於網站的前進鍵
    },
    login(){
      this.$router.push('/login') //跳到首頁 參數是路由名稱
    }
  }
}
</script>

  這裏沒有寫路由設置動畫、運行模式、滾動行爲、懶加載等，官網上寫得很詳細，多看文檔啊平時，文檔傳送門：   https://router.vuejs.org/zh-cn/installation.html