路由的概念

路由的概念

路由是根據(jù)不同的 url 地址展示不同的內(nèi)容或頁面

早期的路由都是后端直接根據(jù) url 來 reload 頁面實(shí)現(xiàn)的，即后端控制路由。

后來頁面越來越復(fù)雜，服務(wù)器壓力越來越大，隨著 ajax（異步刷新技術(shù)） 的出現(xiàn)，頁面實(shí)現(xiàn)非 reload 就能刷新數(shù)據(jù)，讓前端也可以控制 url 自行管理，前端路由由此而生。

單頁面應(yīng)用的實(shí)現(xiàn)，就是因?yàn)榍岸寺酚?/p>

  1. 安裝
    cnpm i -S vue-router

  2. 新建src/router/index.js

// 導(dǎo)入vue
import Vue from 'vue';
// 導(dǎo)入路由
import VueRouter from 'vue-router';
// 導(dǎo)入路由路徑對(duì)應(yīng)的組件
import Szc from '@/components/Szc';
// vue使用路由
Vue.use(VueRouter);

// 拋出路由的實(shí)例
export default new VueRouter({
    routes: [
        {
            path: '/', // 鏈接
            component: Szc // 組件模板，
            
        }
    ]
});
  1. src/main.js
import Vue from 'vue';
import App from './App';

// 導(dǎo)入路由
import router from './router'

new Vue({
    el: "#root",
    router, // 掛載路由, 從而使得整個(gè)應(yīng)用都有路由功能
    render: h => h(App)
});

  1. router-view 用于渲染匹配到的組件

  2. router-link

是一個(gè)組件，它默認(rèn)會(huì)被渲染成一個(gè)帶有鏈接的a標(biāo)簽，通過to屬性指定鏈接地址
注意：被選中的router-link將自動(dòng)添加一個(gè)class屬性值.router-link-active
to：導(dǎo)航路徑，要填寫的是你在router/index.js文件里配置的path值，如果要導(dǎo)航到默認(rèn)首頁，只需要寫成 to="/"

tag: 轉(zhuǎn)為指定標(biāo)簽名

[首頁] ：就是我們要顯示給用戶的導(dǎo)航名稱

<router-link to="/">首頁</router-link>
  1. 動(dòng)態(tài)路由匹配

一個(gè)『路徑參數(shù)』使用冒號(hào) : 標(biāo)記。當(dāng)匹配到一個(gè)路由時(shí)，參數(shù)值會(huì)被設(shè)置到this.route.params，可以在每個(gè)組件內(nèi)使用 模式 | 匹配路徑 |route.params
/user/:username | /user/evan | { username: 'evan' }
/user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: '123' }
.,/


```html
<div>User {{ $route.params.id }}</div>
  1. 通過<router-link> 標(biāo)簽中的to傳參
<router-link :to="{name:'路由名稱',params:{key:value}}">路由</router-link>
  1. name：就是我們在路由配置文件中起的name值。
    另：命名路由就是用一個(gè)名稱來標(biāo)識(shí)一個(gè)路由，在定義路由的時(shí)候設(shè)置一個(gè)name屬性即可。在router-link中也可以用路由的名字來鏈接到一個(gè)路由。

params：就是我們要傳的參數(shù)，它也是對(duì)象形式，在對(duì)象里可以傳遞多個(gè)值。
最后用$route.params.username進(jìn)行接收

  1. 路由的重定向
  2. redirect基本重定向
const routes = [
  { path: '/', redirect: '/goods'}
]
// 重定向的目標(biāo)也可以是一個(gè)命名的路由
const routes = [
  { path: '/', redirect: { name: 'goods' }}
]
// 重定向時(shí)也可以傳遞參數(shù)
{
  path:'/',
  redirect:'/goods/:newsId/:userName'
}
  1. 通過別名進(jìn)行重定向
// 定義路由的時(shí)候可以同時(shí)定義路由的別名
{    path: '/home',
    component: Home,
    alias:'/h'
 }

可以直接使用router-link中的to屬性，進(jìn)行重定向

<router-link to="/h">home</router-link>

區(qū)別：

redirect：仔細(xì)觀察URL，redirect是直接改變了url的值，把url變成了真實(shí)的path路徑。

alias：URL路徑?jīng)]有別改變，這種情況更友好，讓用戶知道自己訪問的路徑，只是改變了<router-view>中的內(nèi)容
注意: 別名alias在path為'/'中，是不起作用的

編程式導(dǎo)航

router.push(location)

注意：在 Vue 實(shí)例內(nèi)部，你可以通過 router 訪問路由實(shí)例。因此你可以調(diào)用 this.router.push

想要導(dǎo)航到不同的 URL，則使用 router.push 方法。這個(gè)方法會(huì)向 history 棧添加一個(gè)新的記錄，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)，則回到之前的 URL

// 字符串
router.push('home')

// 對(duì)象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 會(huì)被忽略，上述例子中的 query 并不屬于這種情況。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有參數(shù)的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

router.replace(location)

跟 router.push 很像，唯一的不同就是，它不會(huì)向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄

聲明式

<router-link :to="..." replace>

編程式

router.replace(...)

router.go(n)

這個(gè)方法的參數(shù)是一個(gè)整數(shù)，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)

// 在瀏覽器記錄中前進(jìn)一步，等同于 history.forward()
router.go(1)

// 后退一步記錄，等同于 history.back()
router.go(-1)

// 前進(jìn) 3 步記錄
router.go(3)

// 如果 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)
  1. 嵌套路由

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 當(dāng) /user/:id/profile 匹配成功，
          // UserProfile 會(huì)被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 當(dāng) /user/:id/posts 匹配成功
          // UserPosts 會(huì)被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

注意： 要注意，以 / 開頭的嵌套路徑會(huì)被當(dāng)作根路徑。 這讓你充分的使用嵌套組件而無須設(shè)置嵌套的路徑

  1. 命名路由

給某個(gè)路由設(shè)置名稱, 通過一個(gè)名稱來標(biāo)識(shí)一個(gè)路由

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user', // 
      component: User
    }
  ]
})

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

router.push({ name: 'user', params: { userId: 123 }})
  1. 命名視圖
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: { // 多個(gè)組件
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})
  1. 路由對(duì)象屬性
    $route.path
    類型：string
    字符串，對(duì)象當(dāng)前路由的路徑， 總是解析為絕對(duì)路徑

$route.params
類型 ： object
一個(gè)key/value 對(duì)象，包含了動(dòng)態(tài)片段和全匹配片段，如果沒有路由參數(shù)，就是一個(gè)空對(duì)象

route.query 類型 :Object 一個(gè)key/value對(duì)象，表示URL查詢參數(shù)，例如，對(duì)于路由/foo?user=1,則有route.query.user==1 ,如果沒有查詢參數(shù)，則是空對(duì)象

route.hash 類型：string 當(dāng)前路由的hash只，帶# 如果沒有hash值則為空字符串route.fullPath
類型 ：string
完成解析后的URL，包含查詢參數(shù)和hash的完整路徑

$route.matched
類型：Array<RouteRecord>
一個(gè)數(shù)組，包含當(dāng)前路由所有嵌套路徑片段的路有記錄，路由記錄就是routes配置數(shù)組中的對(duì)象副本（還包括children數(shù)組）

$route.name
當(dāng)前路由的名稱，如果有的話

$route.redirectedFrom
如果存在重定向，即為重定向來源的路由的名字

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容