Vue-Router的安装与使用
介绍
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
安装Vue Router
- 在html文件中引入vue-router.js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
注意: Vue Router必须要有Vue的支持才可以使用,所以在Html中引入Vue Router时必须先引入Vue
- 在已有Vue项目中手动安装vue-router
npm install --save vue-router
- 使用vue-cli创建自带vue-router的新项目
vue create project_name
# Vue 会询问你使用哪种配置
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features
# 请选择 Manually select features,Vue会询问你当前项目需要哪些配置
Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
# 空格选择/取消 a全选 i反选
(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
> (*) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
#请将Router按空格键选中,后面一系列的询问直接确认就好
简单的路由实现
介绍: 路由本质上就是通过路由(也可称之为网址路径)的跳转变化,控制应用切换显示不同的UI组件
-
在Html页面中实现Vue Router
步骤:
- 创建路由切换控制的UI组件
- 创建一个路由地址与对应UI组件映射的配置对象routes
- 实例化VueRouter对象并传入routes与其他可选路由配置对象
- 初始化Vue实例, 并将VueRouter实例对象作为配置参数传入,从而使得整个Vue实例支持路由相关功能
代码:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>
<script>
// 1.创建组件配置对象
const Home = { template: '<div>我是主页</div>' }
const About = { template: '<div>我是关于页面</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以只是一个组件配置对象。
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// VueRouter还可以接受别的配置参数, 我们之后会讲
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建Vue实例对象并挂载在页面上。
// 将上面创建好VueRouter实例对象作为Vue实例的 router 配置参数注入，当前整个Vue实例内部就都支持路由功能了
// 从而让整个应用都有路由功能
const app = new Vue({
el: "#app",
router
})
// 配置完成
</script>
注意: 路由的相关配置已经完成,我们还需要在应用的DOM节点中将路由渲染出来实现,路由控制UI的效果。这个我们等会再学习。
-
在Vue单文件应用中实现Vue Router
注意: 单文件应用中配置Vue Router与在HTML中配置,只是有两处不同:
在单文件应用中我们应该将VueRouter的相关配置代码抽离到单独为模块中，路由相关组件也应该改写为单文件组件并使用import引入
在Html中引入VueRouter插件在检测到 Vue 是可访问的全局变量时会自动调用
Vue.use()为 Vue 添加全局路由功能,而在单文件应用需要手动使用Vue.use()方法使用Router插件。
比如 router 选项, Vue构造函数中时不包含这个配置的,是VueRouter后添加的。并且VueRouter也提供了一些路由原型属性以及全局组件，这些我们之后都会学习
步骤:
- 在项目src目录中创建router目录并创建index.js文件用来封装VueRouter相关配置
- 引入Vue和VueRouter并使用
Vue.use(VueRouter)全局安装路由插件 - 创建路由切换控制的UI组件并使用import引入到路由配置文件中
- 创建一个路由地址与对应UI组件映射的配置对象routes
- 实例化VueRouter对象并公开该模块
- 在main.js文件中初始化Vue实例时, import引入路由模块并作为配置参数传入Vue配置选项router,从而使得整个Vue实例支持路由相关功能
// src/router/index.js
// 1.引入Vue VueRouter库
import Vue from 'vue'
import VueRouter from 'vue-router'
// 3.创建路由切换控制的UI组件并使用import引入到路由配置文件中
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 2.使用全局方法 Vue.use将VueRouter安装到Vue中
Vue.use(VueRouter)
// 4.定义路由
// 每个路由应该映射一个组件。 其中"component" 可以只是一个单文件组件对象。
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]
// 5.1 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes
})
// 5.2 公开VueRouter实例对象模块
export default router
// src/main.js
import Vue from 'vue'
import App from './App.vue'
// 引入Router实例对象
import router from './router'
Vue.config.productionTip = false
new Vue({
router, // 将路由实例对象配置到Vue实例中
render: h => h(App)
}).$mount('#app')
-
使用VueRouter提供的全局路由组件,实现路由UI
渲染路由组件 <router-view>
代码:
<div id="app">
<router-view></router-view>
</div>
介绍: 通过在DOM中添加一个router-view组件就可以实现路由切换UI更新了,当我们在浏览器地址栏修改路由地址时,router-view组件就会根据VueRouter实配置的映射关系对象同步渲染对应的UI组件了
渲染跳转路由组件 <router-link>
介绍: 我们还可以通过渲染跳转路由组件, 实现通过用户点击实现路由跳转
代码:
<div id="app">
<router-link to="/">主页</router-link>
<router-link to="/about">关于</router-link>
<router-view></router-view>
</div>
注意: 上面的两个组件router-link 与 router-view都是VueRouter插件所提供的路由全局组件,他们的具体使用我们会在后面学习
动态路由匹配
介绍: 我们经常需要把某种匹配规则的路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们通过使用路由的 “动态路径参数”(dynamic segment) 来达到这个效果:
使用: 在实例化VueRouter配置选项routes中path路径使用以冒号“:“开头的路径,这个路径就会成为动态路径参数，当url与动态路径匹配时。匹配的url字符串与动态路径名将会作为键值对存放在VueRouter为vue实例提供的路由原型属性 $route.params 对象属性中。
例子:
| 路由模式 | 匹配路径 | $route.params |
|---|---|---|
| /user/:username | /user/mark | {username: 'mark'} |
| /user/:username | /user/lucas | {username: 'lucas'} |
| /user/:id | /user/10086 | {id: '10086'} |
| /user/:username/post/:post_id | /user/mark/post/12345 | {username: 'mark', 'post_id': '12345'} |
注意:
- 路由匹配到的结果都是字符串
- 一个路由中可以设置多段“路径参数”
- $router时VueRouter为添加的 Vue 实例方法,用来存储当前路由的相关信息，这个知识点我们会在后面学习
代码:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<router-link to="/">主页</router-link>
<router-link to="/user/mark">Mark</router-link>
<router-link to="/user/jancos">Jancos</router-link>
<router-link to="/user/lucas">Lucas</router-link>
<router-link to="/user/max">Max</router-link>
<router-link to="/user/rose">Rose</router-link>
<router-view></router-view>
</div>
<script>
const Home = { template: '<div>我是主页</div>' }
const User = { template: '<div>我是用户详情页 {{$route.params.username}}</div>' }
// 以冒号开头的路由路径,都会作为动态路径
const routes = [
{ path: '/', component: Home },
{ path: '/user/:username', component: User }
]
const router = new VueRouter({
routes
})
const app = new Vue({
el: "#app",
router
})
</script>
嵌套路由
概念: 实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。
接着上节创建的 app：
<div id="app">
<router-view></router-view>
</div>
const User = {
template: '<div>我是用户详情页 {{$route.params.username}}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。例如，在 User 组件的模板添加一个 <router-view>：
const User = {
template: `
<div class="user">
<h2>我是用户详情页 {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置:
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
注意:
以 / 开头的嵌套路径会被当作根路径。 路径嵌套时无需用"/"开头这让你充分的使用嵌套组件而无须设置嵌套的路径。
children 配置就是像 routes 配置一样的路由配置数组，可以嵌套多层路由。
此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个空的子路由：
const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
// ...其他子路由
]
}
]
})
