安装
直接下载:https://unpkg.com/vue-router/dist/vue-router.js
上面的链接会一直指向在 NPM 发布的最新版本。
在 Vue 后面加载 vue-router,它会自动安装
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
NPM
npm install vue-router
如果在一个模块化工程中使用它,必须要通过 Vue.use()
明确地安装路由功能:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
开始
用 Vue.js + Vue Router 创建单页应用,感觉很自然:使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。
<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">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例,然后传 routes 配置
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
const app = new Vue({
router
}).$mount('#app')
// 应用已经启动了!
通过注入路由器,我们可以在任何组件内通过 this.$router
访问路由器,也可以通过 this.$route
访问当前路由:
// Home.vue
export default {
computed: {
username() {
return this.$route.params.username
}
},
methods: {
goBack() {
window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
}
}
}
< router-link to = "" >< / router-link >
默认会被渲染成一个 <a> 标签 to=""为我们定义的路由
< router-view >< / router-view >
路由匹配到的组件将渲染在这里
动态路由配置
多个路由映射到同一组件上
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
/user/foo
和 /user/bar
都将映射到相同的组件上。
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params
,可以在每个组件内使用。于是,我们可以更新 User 的模板,输出当前用户的 ID:
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
嵌套路由
实现 Home 页面和 Doc 页面路由,其中 Doc 页面又分发为 Switch 和 Button 组件页面,实现 Doc 组件的嵌套路由。
const history = createWebHashHistory()
export const router = createRouter({
history: history,
routes: [
{ path: '/', component: Home },
{
path: '/doc',
component: Doc,
children: [
{ path: 'switch', component: SwitchDemo },
{ path: 'button', component: ButtonDemo },
]
}
]
})
路由模式
- hash 模式
-
vue-router
默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 - 任何情况下都可以使用,浏览器不会把 url # 后面的内容发送给服务器,这种模式的 SEO 不友好;
- history 模式
- 只有当后端将所有前端路由都渲染到同一页面的情况下可以使用;
- 由
window.location.pathName
获取 href,window.history.pushState()
改变 href ,onStateChange(href)
监听 href 变化
- mermory 模式
- url 不会发生改变,从 localStorge 获取 url 的改变;
- 适用于非浏览器,如 APP 应用页面路由,是单机版路由
网友评论