Vue學習之路 （二）

• Vue-router（基礎版）
• 一.增加靜態路由
• 二.動態路由+路由嵌套+404頁面
• 三. 編程式導航
• 四.命名路由
• 五.命名視圖
• 六.重定向和起別名
• • 1.重定向
  • 2.起別名
• 七.路由組件傳參
• • 1.先在src文件夾下的views文件夾下創建newUser.vue
  • 2.修改route文件夾下的index.js
• 八.H5 History 模式(去掉#號)

Vue-router（基礎版）

• 當前項目版本
• vue(2.6.14)
• vue-router(3.5.2)

–

一.增加靜態路由

項目創建好之后再src文件夾下的views文件夾下創建one.vue

<template><div><h3>第一個頁面</h3></div>
</template><script>
export default {}
</script>
<style>
</style>

2.配置路由
在src目錄下的router文件下的index.js

import one from '../views/one.vue'
const routes = [{path:'/one',component:one}
]

3.在App.vue中

<router-link to="/one">one</router-link>

二.動態路由+路由嵌套+404頁面

1.在view文件下新建一個User文件夾(這里方便后期查看,不新建文件夾也行但是層級看著就很亂。)
建完之后層級是這樣的

• src/views/User/UserHome.vue
• src/views/User/UserPosts.vue
• src/views/User/UserProfile.vue
• src/views/User.vue

在User下新建UserHome.vue

<template><div>Home</div>
</template><script>
export default {}
</script><style></style>

再創建一個UserPosts.vue

<template><div>Posts</div>
</template><script>
export default {}
</script><style></style>

最后創建UserProfile.vue

<template><div>Profile</div>
</template><script>
export default {}
</script><style></style>

2.在views目錄下創建User.vue

<template><div><h2>User {{ $route.params.id }}</h2><router-view></router-view></div>
</template><script>
export default {}
</script><style></style>

3.route目錄下的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import User from '../views/User.vue'
import UserHome from '../views/User/UserHome.vue'
import UserProfile from '../views/User/UserProfile.vue'
import UserPosts from '../views/User/UserPosts.vue'Vue.use(VueRouter)const routes = [{path:"/user/:id",component:User,children:[{path:'',component:UserHome},{path:'profile',component:UserProfile},{path:'posts',component:UserPosts}]} 
]const router = new VueRouter({mode:'history',routes
})export default router

4.在App.vue修改為以下內容

<template><div id="app"><div id="nav"><router-link to="/user/eduardo">/user/eduardo</router-link><br/><router-link to="/user/eduardo/profile">/user/eduardo/profile</router-link><br/><router-link to="/user/eduardo/posts">/user/eduardo/posts</router-link><br/></div><router-view/></div>
</template><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}#nav {padding: 30px;
}#nav a {font-weight: bold;color: #2c3e50;
}#nav a.router-link-exact-active {color: #42b983;
}
</style>

• 增加404頁面
  先在views目錄下創建404.vue頁面
  再按下面配置
  這是第一種方法

 import notFound from '../views/404.vue'{path: "/404",name: "notFound",component: notFound}, {path: "*", // 此處需特別注意置于最底部redirect: "/404"}

第二種方法

{path: "*",name: "notFound",component: () => import(/* webpackChunkName: "about" */ '../views/404.vue')}

三. 編程式導航

聲明式	編程式
<router-link :to="…">	router.push(…)

1.在views下新增two.vue

<template><div><h3>第二個頁面</h3></div>
</template><script>
export default {}
</script><style></style>

2.然后在route下的index.js新增代碼塊

const routes = [{path:'/two',component:two}]

3.修改one.vue的內容

<template><div><h3>第一個頁面</h3><button @click="toNextPage">跳轉到第二個頁面</button></div>
</template><script>
export default {//methods方法methods:{toNextPage(){this.$router.push("two");}}
}
</script><style></style>

四.命名路由

通過一個名稱來標識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執行一些跳轉的時候
1.先在views文件夾下創建Form.vue

<template><div>form組件</div>
</template>

2.然后再創建一個Index.vue

<template><div><router-link :to="{ name: 'form123'}">User</router-link></div>
</template>

3.修改src/router/index.js

const router = [routes: [{path: '/form',name: 'form123',component:()=> import('../views/Form.vue')}]
]

五.命名視圖

1.修改App.vue,修改內容如下

<template><div><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></div>
</template>

2.修改router文件夾下index.js

import Foo from '../views/Foo.vue'
import Bar from '../views/Bar.vue'
import Baz from '../views/Baz.vue'const router = new VueRouter({routes: [{path: '/',//這里是加s的components: {default: Foo,a: Bar,b: Baz}}]
})

如果把 <router-view class="view three" name="b"></router-view>的name屬性去掉就會顯示默認組件

六.重定向和起別名

1.重定向

const routes = [{path:'/',redirect:'/one'},{path:'/one',component:one}
]

2.起別名

const routes = [{path:'/',redirect:'/one',},{path:'/one',component:one,alias:'/aaa'}
]

七.路由組件傳參

舊方案，高耦合低內聚

• 使用$route.params.id

新方案,高內聚低耦合

1.先在src文件夾下的views文件夾下創建newUser.vue

src\views\newUser.vue
增加以下內容

<template><div>newUser{{id}}</div>
</template><script>
export default {props:['id'],data(){return {}}
}
</script>

2.修改route文件夾下的index.js

修改這一塊區域

const routes = [{path:"/newuser/:id",component:() => import('../views/newUser.vue'),props:true}]

在瀏覽器地址欄里輸入....../newuser/.....即可查看

八.H5 History 模式(去掉#號)

-	hash	history
url顯示	有#顯示	無#
回車刷新	可以加載到hash對應頁面	404
支持版本	支持低版本瀏覽器和IE瀏覽器	H5推出的API

在route文件下的index.js找到以下代碼塊,修改如下內容

const router = new VueRouter({mode: 'history',routes: [...]
})

vue默認hash模式，想要沒有#，可以使用history模式

總結

以上是生活随笔為你收集整理的前端Vue学习之路(二)-Vue-router路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。