认识路由
发展阶段(p100各种方式原理):
URL 的 hash
URL 的 hash 也就是锚点(#),本质上是改变 window.location 的 href 属性。我们可以通过直接赋值 location.hash 来改变 href,但是页面不发生刷新。
原地址:
http://localhost:8080
在控制台输入:
location.hash = 'aaa'
//http://localhost:8080/aaa
location.hash = 'bbb'
//http://localhost:8080/bbb
HTML5 的 history 模式
history.pushState({},'','home')
http://localhost:8080/home
history.pushState({},'','about')
http://localhost:8080/about
(可以使用history.back
后退)
history.replaceState({},'','home')
http://localhost:8080/home
history.replaceState({},'','about')
http://localhost:8080/about
(直接替换,不可返回)
history.back
等价于history.go(-1)
history.forward
等价于history.go(1)
这三个接口等价于浏览器的前进后退
认识 vue-router
vue-router 基本使用
- 安装 vue-router
npm install vue-router --save
- 在模块化工程中使用它(因为它是一个插件,所以可以通过 Vue.use()来安装路由功能)
- 第一步:
导入
路由对象,并且调用Vue.use(VueRouter)
- 第二步:创建
路由实例
,并且传入路由映射配置
- 第三步:在
Vue 实例
中挂载
创建的路由实例
- 第一步:
src/router/index.js
:
// 配置路由相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'
// 1.通过 Vue.use(插件),安装插件
Vue.use(VueRouter)
// 2.创建 VueRouter 对象
const routes = []
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes
})
// 3.将router 对象传入到 Vue 实例中
export default router
main.js
:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
App.vue
:
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
- 使用 vue-router :
- 第一步:创建路由组件
src/components/home.vue
:
<template>
<div>
<h4>我是首页</h4>
<p>我是首页的内容</p>
</div>
</template>
<script>
export default {
name: "home"
}
</script>
<style scoped>
</style>
src/components/about.vue
:
<template>
<div>
<h4>我是关于</h4>
<p>我是关于的内容</p>
</div>
</template>
<script>
export default {
name: "about"
}
</script>
<style scoped>
</style>
- 第二步:配置路由映射:组件和路径映射关系
src/router/index.js
:
// 配置路由相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '../components/home'
import about from '../components/about'
// 1.通过 Vue.use(插件),安装插件
Vue.use(VueRouter)
// 2.创建 VueRouter 对象
const routes = [
{
path: '',
// redirect:重定向
// 将根路径重定向到 /home 的路径下
redirect: '/home'
},
{
path: '/home',
component: home
},
{
path: '/about',
component: about
}
]
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes,
// 默认情况下,路径的改变使用的是 URL 的 hash
// 如果希望使用 HTML5 的 history 模式,进行如下配置:
mode: 'history'
})
// 3.将router 对象传入到 Vue 实例中
export default router
- 第三步:通过<router-link>和<router-view>使用路由
- <router-link>:该标签是一个 vue-router 中已经内置的组件,它会被渲染成一个<a>标签。
- <router-view>:该标签会根据当前的路径,动态渲染出不同的组件。
- 网页的其他内容,比如顶部的标题/导航,或者底部的一些版权等会和<router-view>处于同一个等级。
- 在路由切换的时候,切换的是<router-view>挂载的组件,其他内容不会发生改变。
App.vue
:
<template>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
结果:
<router-link> 补充:
vue-router 嵌套路由
vue-router 参数传递
vue-router 导航守卫
vue-router keep-alive
参考视频:小码哥 Vue 视频教程