P78 078-路由基本使用

Vue Router是vue的官方路由 在使用vue.js構(gòu)建單頁面應(yīng)用更加方便.

功能包括:

1.嵌套路由映射

2.動態(tài)路由選擇

3.模塊化,基于組見的路由配置

4.路由參數(shù) 查詢 通配符

5.展示由vue.js的過度系統(tǒng)提供的過度效果

6.細(xì)致的導(dǎo)航控制

7.自動激活css類的鏈接

8.HTML5 history模式或者h(yuǎn)ash模式

9.可定制的滾動行為

10.URL的正確編碼

(安裝和引入：在項目中使用 Vue Router 需要先安裝它，并將其引入到 Vue 實例中?？梢允褂?npm 或 yarn 進行安裝，并使用 import 導(dǎo)入需要的模塊。

命令:npm install vue-router)

使用:

一.配置路由

使用 Vue Router 需要配置路由規(guī)則。通過定義一個包含路徑（path）和對應(yīng)組件（component）的路由表來實現(xiàn)?？梢耘渲们短茁酚?、動態(tài)路由和命名視圖等

import {createRouter,createWebHashHistory} form 'vue-router'

const router=[{

path:"路徑",

component:"組件路徑"

}]

const router = createRouter({

history:createWebHashHistory(),//hash模式#

routes, // routes: routes 的縮寫

})

export default router

二.導(dǎo)入到main.js文件中

import router from '路徑'

在掛載前注冊路由插件

app.use(router)

三.路由出口

在根組件中(App.vue)寫入一個路由出口(插槽)

<router-view></router-view>