vue-router路由導航

安裝路由

npm install vue-router -S

 

路由導航守衛

// to ：是要去的哪個頁面 路由相關的參數 (表示 將要訪問的那個路由對象) // from ：從哪個頁面即將離開 (從哪個路由對象，跳轉而來) // next ：next 是一個函數，就相當於 Node 里面 express 中的 next 函數 (代表放行) // next() 表示放行 next('/login') 表示強制跳轉到login頁  // 注意： 這里的 router 就是 new VueRouter 得到的 路由對象 // 掛載路由導航守衛
router.beforeEach((to, from, next) => { // 如果用戶輸入的是login頁面 直接放行
  if (to.path === '/login') return next() // 查看客戶端是否有token值
  const tokenStr = window.sessionStorage.getItem('token') // 如果沒有token 則直接跳轉到登錄頁
  if (!tokenStr) return next('/login') // 有token放行
 next() }) // 把路由導航暴露出去
export default router

 

去掉地址欄的 # 號

const router = new VueRouter({ mode: 'history', // 這樣就能去掉URL地址欄的 # 號
 routes })

 

路由傳參

使用<router-link to="">傳遞參數

父組件中: 使用 <router-link to="/需要跳轉的路徑/需要傳遞的參數"></router-link>

// to屬性，表示 點擊此鏈接，要跳轉到哪個 hash 地址 // tag 屬性 要渲染成什么標簽 默認 是 a標簽 tag可以轉換成自己想要的標簽
<router-link to="/跳轉的地址/傳遞的參數" tag="li">首頁</router-link>

子組件中,使用 props 來接收傳遞過來的參數

export default { props: ['傳遞的參數'] }

如果配置文件中沒有開啟 props 的話, 在子頁面 可以使用 this.$route.params.傳遞的參數 

 

路由配置文件(這是為接收頁面開啟的props)

{ path: '子路由地址/:傳遞的參數', component: 子路由文件,
　　 props: true // 如果在組件中,想要拿到 path 中匹配的路由參數項, 可以為 路由規則 開啟 props 傳參 }

 

使用#router傳遞參數

this.$router.push({ path: '要跳轉的地址', name: '要跳轉的路徑的 name,在 router 文件夾下的 index.js 文件內找', params: { // 需要傳遞的參數 鍵 值的格式 
                key: 'key', msgKey: this.msg } /*query: { // 需要傳遞的參數 鍵 值的格式 key: 'key', msgKey: this.msg }*/ }) 

 

接收

this.$route.params.鍵 this.$route.query.鍵

 

 

 

1.params
由於動態路由也是傳遞params的，所以在 this.$router.push() 方法中path不能和params一起使用，否則params將無效。需要用name來指定頁面。

通過name和params傳遞參數
this.$router.push({ name: ‘index’, params: { username: “fatjack”, password: 123 }})

獲取
this.$route.params.username

<div>當前用戶名: {{this.$route.params.uaername}} </div>

 

2.query

通過path和query傳遞參數
this.$router.push({path: ‘/index’, query: { username: “fatjack”, password: 123 }});

獲取
this.$route.query.username

 

 編程式導航

之前的router-link是標簽跳轉；除了使用router-link是標簽跳轉之外，還可以使用Javascript來實現路由的跳轉；

編程式導航

使用vue-router提供的JS  API實現路由跳轉的方式，叫做編程式導航；

編程式導航的用法 

// 如果要跳轉指定的 hash地址, 只能使用push方法

this.$router.push('路徑的地址') 如果要跳轉到指定hash地址，只能使用push方法

this.$router.go(n)   n = -1 后退一步  n = 1 前進一步

this.$router.forward() 前進一步

this.$router.back()  后退一步

以上的記得都要注冊在methods 里 的方法里

 

 

 this.$route包含的信息

// fullpath 全地址 // path 路由地址 // params 路由的參數  // query 問號后查詢的參數 // name 路由名稱 // meta 路由元信息，標識路由是否需要全局守衛

 

 

 

 路由基本樣式

const routes = [ // 這個 routes 就是 路由 規則 的數組，里面要放很多的對應關系
  // 路由規則的基本組成 { path: '/hash地址', component: 配置對象(要展示的組件) },在path中 ，帶冒號的，是路由參數項
 { path: '/', redirect: '/home' // 通過 redirect是屬性，可以實現前端路由的重定向 如果訪問的是 根路徑 就會跳轉到指定路徑
 },
　{ path: '/home', component: Home, props: true // 開啟路由傳參
 }, { path: '/about/:接收的參數', // :接收的參數
 component: About, children: [ // children 定義子路由規則
 { path: '/', component: '' } ] }] const router = new VueRouter({ routes, mode: 'history' // 區掉地址欄中的 # 號
}) export default router // 把路由暴露出去

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

vue-router路由