vue路由基礎

摘錄自 “ 一個前端小小白 ”,請支援原作者

1----vue-router内置元件

​

​router-link​

​

類似于a标簽，用于在單頁面之間的跳轉，預設渲染為a标簽

1. to屬性,後面跟着用于跳轉的路徑
2. tag屬性，指定渲染成指定的标簽（tab=“p”）
3. router-link-active,自動激活的class名稱，當·to·屬性的值和位址欄路徑相同自動激活該屬性。
4. linkActiveClass,自定義屬性名稱，在路由(reouter)的index.js中修改

const router = new VueRouter({
  linkActiveClass:'active',
  //添加linkActiveClass修改router-link-active成屬性名稱
  routes
})      

2----頁面之間的傳值

1.query傳值

通過 ​

​html?id​

​ 這種寫法傳值（query傳值）

//向/about頁面傳遞值
<div class="na" v-for="(item,index) in list" :key="item.name">
  <router-link :to="`/about?${item.id}&{item.name}`">
      //&間隔分隔傳遞的多個值
    // 通過?${item.name}将名字傳遞到/about的浏覽欄上 -->
    {{item.name}}
  </router-link>
</div>      

​

​/about​

​ 頁面可以通過this的$route的query擷取到傳遞的值

created(){
  //列印出傳遞的值
  console.log(this.$route.query)
},      

2.動态路由傳值

在router路由的 ​

​index.js​

​ 檔案中建立動态路由

{
  //動态路由寫法
  //path:'/info:tit',單個傳遞
  path:'/info:id/:name',//傳遞多個值
  component:Info
 }      

需要傳遞值的頁面進行傳遞

<router-link to="/info/這是傳遞的值1id/這是傳遞的值2name">
//to="/info:id  單個值傳遞
  跳轉動态路由頁面
</router-link>      

​

​/info​

​ 頁面對傳遞的值進行接收

created(){
  //通過params進行接收
  console.log(this.$route.params)
}      

3----嵌套路由

一個頁面中有多個子頁面，就是嵌套路由

在注冊路由的時候将路由定義 ​​

​children:[子路由]​

​

路由重定向，預設顯示xxx路由

{
    path: '/',
    name: 'Home',
    component: Home,
    redirect："/name/a",
  children:[
    {
      path:'a',
      component:a
    },
    {
      path:'b',
      component:b
    },
    {
      path:'c',
      component:c
    }
  ]
  },      

在首頁面調用

<router-link to="/Home/a">a頁面</router-link> 跳轉a頁面
<router-link to="/Home/b">b頁面</router-link> 跳轉b頁面
<router-link to="/Home/c">c頁面</router-link> 跳轉c頁面
<router-view>
  标簽渲染a/b/c子路由頁面
</router-view>      

路由别名，聲明多個名字也可通路該路由頁面

{
    path: '/',
    name: 'Home',
  //給路由起别名,别名通路也可進去該路由頁面
  alias:['/home','/home1']
    component: Home
  },      

跳轉

​

​<router-link :to="{path: '/about'}">about頁面</router-link>​

​

jquery傳值

​

​<router-link :to="{path: '/about',query:{id:6}}">about頁面</router-link>​

​

動态路由傳值，

并不能直接傳值，要将path修改為name，利用name進行傳遞

​

​<router-link :to="{name: 'about',params:{id:6,name:'張三'}}">about頁面</router-link>​

​

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

5----router

​

​$route​

​

this.$route//是目前路由對象，用于擷取目前路由裡面的屬性和方法      

​

​$router​

​

this.$router//是所有路由對象可以了解為routes      

//1.
this.$router.push('/about')
//2.
this.$router.push({path: '/about'})
//3.跳轉動态路由
this.$router.push({path: '/about/6/張三'})
//4.
this.$router.push({name: '/about',params:{id:6,name:'張三'}})
//5.跳轉傳值
this.$router.push("/about?id=7")
//6.跳轉(去哪?)
$router.go(-1)
//7.回退
$router.back()
//8.前進
$router.forward()
//9.替換目前頁面，不留曆史記錄
$router.replace()