H5页面使用 VueRouter 构建SPA单面应用DEMO
VueRouter 实现原理
一个页面地址由协议/主机名/页面地址/查询字符串/hash组成，如
https://www.host.com/static/index.html?query=123#/user/110
通过浏览器打印以下变量可知道
location.href "https://www.host.com/static/index.html?query=123#/user/110"
location.search "?query=123"
location.hash "#/user/110"
通过给 location.href 一个新地址，页面就会刷新跳到指定的地址上，这相当点击一个超链接进入新页面。但是，如果新地址只有hash这部分不同，其它都一样的情况就不同了。地址整体是有变化的，但页面不会刷新跳转。通过脚本可以检测到这种变化，那将这种变化以一定的规则和需要呈现的视图绑定，这就是VueRouter干的事。例如，点击这样一个VueRouter路由链接:
<router-link to="/user/110">Go to User</router-link>
浏览器地址栏就会改变hash部分：
#/user/110
DEMO 展示要点
VueRouter 的基本使用方法
命名路由，在路由配置项中使用了 name 属性，如 {path: '/user/:userId', name: 'user', component: User }
嵌套路由，通过 children 给路由配置子级路由项目
重定向路由配置项 { path: '/a', redirect: '/b' } 或在 redirect 中使用命名路由 { name: 'foo' }，或一个方法动态返回重定向目标的方法
路由出口组件即生成视图路由结果的视图，<router-view></router-view>
命名视图 <router-view name="specialView"></router-view>，不设置name属性，默认值为 default
多视图路由配置 {path: '/', components: { default: Foo, specialView: User } }
<router-link> 路由组件会渲染成a标签，点击 <router-link :to="..."> 等同于调用 router.push(...)。
<router-link> 使用命名路由 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
-
编程式的导航
router.go(n) 类似 window.history.go(n)。
router.push(location, onComplete?, onAbort?)
router.replace(location, onComplete?, onAbort?) 相当声明式 <router-link :to="..." replace>router.push('home') // 字符串
router.push({ path: 'home' }) // 对象
router.push({ name: 'user', params: { userId: 123 }}) // 命名的路由
router.push({ path: 'register', query: { plan: 'private' }}) // 带查询参数，变成 /register?plan=private
关于路由嵌套参考
https://router.vuejs.org/zh/guide/essentials/nested-routes.html
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
.button { padding:2px; text-decoration: none; background:#00CAFF; border:1px solid #cccccc;}
.button:hover {color:#fff;}
.router-link-active {background:#FfBb00;}
</style>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航，它会被渲染成一个 `<a>` 标签，`to` 属性指定链接 -->
<!-- IE天生天然残缺，不支持反引号，`/user/${id}/${name}`这样的模板字符串就不能使用了 -->
<router-link class="button" to="/foo">Go to Foo</router-link>
<router-link class="button" to="/bar">Go to Bar</router-link>
<router-link class="button" :to="'/user/'+id+'/'+name">Go to User1 View</router-link>
<router-link class="button" :to="'/user/112/Jimbo'">Go to User2 View</router-link>
<button class="button" @click="goBack">Go Back</button>
<span>Watching {{stamp}}</span>
</p>
<!-- 路由视图 路由出口 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
<!-- 命名视图 -->
<router-view name="secondary"></router-view>
</div>
<script>
// 1. 定义组件。组件也可以通过 Vue.extend() 创建或者是一个组件配置对象
const Foo = { template: '<div>foo view</div>' }
const Bar = { template: '<div>bar view</div>' }
const User = {
template:'<div>' + // 因为组件模板只能有一个顶级元素所以这里要使用div包裹两个子元素
' <div>Hello {{ $route.params.id }}</div>' +
' <router-view></router-view>' + // 组件中使用路由视图用于渲染子路由匹配到的组件
'</div>',
watch: { // 添加 watch 方法对路由变化作出响应...
$route:function (to, from) {
console.log("route change ",to," <= ",from);
this.name = to+" <= "+from;
}
},
beforeRouteEnter:function (to, from, next) { // to, from 都是 $route 实例
console.log("before route enter ", to, " <= ", from);
next();
},
beforeRouteUpdate:function (to, from, next) { // 2.2 中引入的导航守卫
// react to route changes...
// don't forget to call next()
console.log("before route update ", to, " <= ", from);
next();
}
}
// 2. 配置组件的路由，每个路由应该映射一个组件
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar, name:"toBar" }, // 设置 name 属性来配置一个命名路由
{ path: '/user/:id', component: User, // 动态路径参数 以冒号开头
children:[ // 嵌套路由 子视图内容会渲染到 User 组件中的 <router-view></router-view>
{ path:'', component:User }, // 子路由空路径时匹配上一级路由 /user/:id
{ path:'jeango', component:Foo }, // 匹配 /user/:id/jeango
{ path:'jimbo', component:Bar }
]
}
]
// 3. 以 `routes` 配置创建 router 实例，{ routes } 是ES6缩写，相当于 {routes: routes}
const router = new VueRouter({ routes:routes })
// 4. 创建vue实例和挂载根实例。启动应用！
const app = new Vue({
router:router,
data:{name:"Jeango", id:110, stamp: + new Date()},
watch: { // 监视参数变化
stamp:function () {
console.log('watching', this.$route);
return this.$route.params.name
}
},
methods: {
goBack:function () {
this.stamp = +new Date(); // 更新相间数据触发watch事件
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}
}
}).$mount('#app')
</script>
