vue路由1 0 1 2 簡單的路由跳轉

2021-10-16 16:34:26 字數 1078 閱讀 6501

## 1. 實現乙個簡單的路由跳轉

!(#### 如果把views該為pages,則router.js中的views也要改為pages

!(### 1.1 pages資料夾下配置乙個detail.vue的頁面

#### 注:乙個頁面只能有乙個div

detail

### 1.2 在router.js中配置一下

routes: [

path: '/',

name: 'home',

component: home

path: '/about',

name: 'about',

component: () => import('@/pages/about.vue')

!(### 1.3 跳轉

about

#### 1.4 事件跳轉

!(hello world

detail

export default {

name: 'home',

methods:{

handleclick(){

this.$router.push('/about')

.home{

font-size: 36px;

!(## 2. 跳轉傳參

### 2.1 router.js配置,傳引數

//只傳遞id

path: '/about/:id',

name: 'about',

component:()=>import('@/pages/about.vue')

### 2.2 從home跳轉到about

home.vue

export default {

name:"home",

methods:{

handleclick(){

this.$router.push('/about/'+10);

### 2.3 about.vue

export default {

name:"about",

mounted(){

console.log(this.$route.params)

簡單的Vue路由

路由可以理解為路徑的來由,通過routes來構建路由物件註冊進router中形成路由例項,再將路由例項註冊到vue中。路由物件中必不可少的有path 路由的虛擬位址,component 路由對應的元件。vue提供的導航元件 router link 最終會渲染成a標籤 to就是href目標位址,通過r...

vue簡單路由(二)

在實際專案中我們會碰到多層巢狀的元件組合而成,但是我們如何實現巢狀路由呢?因此我們需要在 vuerouter 的引數中使用 children 配置,這樣就可以很好的實現路由巢狀。index.html,只有乙個路由出口 main.js,路由的重定向,就會在頁面一載入的時候,就會將home元件顯示出來,...

vue根據路由守衛,判斷使用者許可權,進行路由跳轉

判斷使用者許可權,可以說是每乙個專案都會用到的,因此,提供給大家較為簡單的方法。主要思想是通過判斷使用者登入後,根據後台返回的對應使用者許可權去驗證使用者是否可以進行相關的操作。第一步,建立路由 提供部分 用於解釋 注意 meta物件中的islogin表示需要使用者登入後才能訪問相應頁面 meta物...