路由实现原理
- 传统开发方式 URL 改变后，马上发生请求响应整个页面，有可能资源过多致使页面出现白屏。
- 单页面应用 SPA (Single Page Application)，锚点改变后，不会马上发送请求，而是在某个合适的时机，发起 Ajax 请求，页面局部渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-router</title>
</head>
<body>
<a href="#/login">登陆</a>
<a href="#/register">注册</a>
<div id="app"></div>
<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var objDiv = document.getElementById('app');
window.onhashchange = function() {
console.log(location.hash);
switch(location.hash) {
case '#/login':
objDiv.innerHTML = '<h2>我是登陆页面</h2>'
break;
case '#/register':
objDiv.innerHTML = '<h2>我是注册页面</h2>'
break;
default:
objDiv.innerHTML = '<h2>未找到页面</h2>'
break
}
}
</script>
</body>
</html>
路由使用
VueRouter 引入以后，Vue 实例会自动挂载$router、$route 两个属性对象，组件会继承 Vue 实例上的这两个对象。
经过这两个对象，能够在组件内部得到路由相关的属性。$router就是VueRouter对象；经过$route.params能够获取动态路由参数；经过$route.query能够获取 URL 参数。
Vue.use(VueRouter); // 当Vue不是全局对象时，须要将VueRouter挂载到Vue对象上
let Login = {
template: "<div>我是登陆页面</div>"
};
let Register = {
template: "<div>我是注册页面</div>"
};
// 建立router对象
var router = new VueRouter({
// 配置路由对象
routes: [
// 路由匹配规则
{
path: "/login",
component: Login
},
{
path: "/register",
component: Register
}
]
});
let App = {
template: `
<div>
<router-link to='/login'>登陆页面</router-link>
<router-link to="/register">注册页面</router-link>
<router-view></router-view>
</div>
`
};
new Vue({
el: "#app",
components: {App},
router: router, // 将router路由对象交给Vue实例管理
template: "<App/>"
})
- 引入 vue-router 模块后，会有两个全局的组件 router-link、router-view
- router-link 组件至关于
<a>标签，它的to属性至关于<a>标签的href属性; - router-view 组件是路由匹配组件的出口。
- router-link 组件至关于
路由传参
路由参数包括：1. 动态路由参数(以冒号标注的参数)；2. URL参数(http://xxx.html/?a=1&b=2)
let UserParams = {
template: "<div>动态路由参数页面</div>",
created() {
// VueRouter引入以后，Vue实例上会挂载有$router、$route两个属性对象，
// 组件会继承Vue实例上的$router、$route对象；经过这两个对象，能够在组件内部得到路由参数。
console.log(this.$router);
console.log(this.$route.params)
}
};
let UserQuery = {
template: "<div>URL参数页面</div>"
};
// 建立router对象
var router = new VueRouter({
routes: [
{
name: "UserParams",
path: "/user/:id", // 动态路由参数，以冒号开头
component: UserParams
},
{
name: "UserQuery",
path: "/UserQuery",
component: UserQuery
}
]
});
let App = {
// 两种路由参数传入 router-link 的示例：
// 动态路由参数经过 params 属性选项传入参数；URL参数经过 query 属性选项传入参数。
template: `
<div>
<router-link :to="{name: 'UserParams', params: {id: 2}}">动态路由参数</router-link>
<router-link :to="{name: 'UserQuery', query: {userid: 3}}">URL参数</router-link>
<router-view></router-view>
</div>
`
};
new Vue({
el: "#app",
components: {
App
},
router: router,
template: "<App/>"
})
当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。由于两个路由都渲染同一个组件，比起销毁再建立，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
若是在复用组件时，想对路由参数的变化做出响应的话，能够简单地 watch (监测变化) $route 对象：
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化做出响应...
}
}
}
// 或者使用 beforeRouteUpdate 导航守卫： const User = { template: '...', beforeRouteUpdate (to, from, next) { // 对路由变化做出响应... } } 补充更新：
去掉路径上的#
vue-router 默认使用 hash 模式，因此在路由加载的时候，项目中的 url 会自带"#"。若是不想使用"#"，可使用 vue-router 的另外一种模式：history。
mode说明：
默认值："hash"(浏览器)或"abstract"(node.js)
可选值："hash"|"history"|"abstract"
当使用 history 模式时，因为项目是单页面应用，因此在路由跳转的时候，可能因为访问不到资源而出现 404。解决办法是在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何资源，则返回 index.html 页面。
- THE END -
最后修改：2024年10月24日
非特殊说明，本博所有文章均为博主原创。
