我会从两个方面来写路由
自定义路由(以拉勾网为例)
路由指的是在不刷新页面的情况下更新页面
通过:#hash,例如:10.0.164.8:8080/index.html/#main
然后通过H5的history对象的history.pushState()+popState事件实现路由切换
实现步骤:
(1)在script文件下创建路由表 routes.js
export default {
'/' : 'Position' 首页
'/search': 'Search',
'/mine' : 'Mine'
}
(2)在app.js中匹配路径
import routes form './routes'
//动态获取组件
new Vue({
el : '#root',
data:{
//定义当前路径信息
currentRoute: window.location.pathname
},
computed : { //生成子路由组件
ViewComponent() {
//根据路由找到匹配的组件名
const MatchingView = routes[this.currentRoute];
返回组件对象
return MatchingView ? require(`./page/${MatchingView}.vue`) :require('./page/404.vue')
}
},
//渲染组件
render(h) {
return h(this.ViewComponent)
}
})
(3)在index.vue中的section放通过插槽存放porixtion mine search 组件
<section>
<slot></slot> //插槽用来存放各个组件
</section>
(4)position.vue
import Index from './Index.vue'
export default {
//导入Index组件
data() {
return{
}
},
componets : {
Index //定义Index组件
}
}
将template的内容外层用 <Index></Index>包(Index建个插槽)
(5)同理search也一样
search.vue
import Index from './Index.vue'
export default {
//导入Index组件
data() {
return{
}
},
componets : {
Index //定义Index组件
}
}
将template的内容外层用 <Index></Index>包
(6)点击链接切换组件
通过history提供的事件
window.addEventListener('popstate',function(){
vm.currentRoute = window.location.pathname
},false)
(7)定义点击切换组件时的a标签组件
VLink.vue 写逻辑
<template>
<a :href='href' class="{active:isActive}">
<slot></slot>
@click.prevent='go'
</a>
</template>
import routes from '../routes'
export default {
props : { //对象类型
href: {
type : String,
required : true
}
},
computed: {
isActive () {
<!--判断调用组件传递进来的href是否是当前路径的href-->
return this.href == this.$root.currentRoute
}
},
methods:{
go(){
this.$rout.currentRoute = this.href
window.history.pushState(null,routes[this.href],this.href)
}
}
}
(8)通用组件,Vlink.vue 在index.vue中引入
import VLink form '../../vlink.vue'
在index.vue里找到底部 ul li 用 v-link 标签包住
<ul>
<v-link href='/'>
<li>
</li>
</v-link>
<v-link href='/search'>
<li>
</li>
</v-link>
<v-link href='/mine'>
<li>
</li>
</v-link>
</ul>
通过a链接
<template>
<a>
<slot></slot>
</a>
</template>
Vue.component('VLink',{
template
})
vue-router
还是框架简单 来来来
路由有三种导航钩子:
-
1 、全局导航钩子
beforeEach
beforeResolve
afterEach每个钩子方法接收三个参数: to: Route : 即将要进入的目标 [路由对象] from: Route : 当前导航正要离开的路由 next: Function : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed (确认的)。 next(false): 中断当前的导航。 如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。 next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。 确保要调用 next方法,否则钩子就不会被 resolved。
例子:
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // do something next(); }); router.afterEach((to, from, next) => { console.log(to.path); }); 原文链接:http://blog.csdn.net/sinat_17775997/article/details/68941078
- 2 、某个路由独享的导航钩子
beforeEnter
-
3 、路由组件里的导航钩子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
例子:let fromPath = ''; export default{ beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当钩子执行前,组件实例还没被创建 fromPath = from.path; next(); }, }
(1)安装插件 npm i vue-router -D
app.js引入:
import Vue from 'vue'
import VueRouter from 'vue-router'
import '../../app.scss'
import routes from './routes'
Vue.use(VueRouter)
const routes = new VueRouter({
routes
})
new Vue({
el:'#root',
router
})
配置:
webpack.config.js,跟plugins同级
externals : {
'vue' : 'window.Vue'
'vue-router':'window.VueRouter'
}
会将第三方组件抽离出去
把node_modules/vue/dist/vue.min.js
/vue/dist/vue-router/vue-router.min.js
放到根目录并在index.html中引入
这样减小了app.js的大小
(2)定义
1、 scripts下创建routes.js
import Index frmm './pages/Index.vue'
import Position from './pages/Position.vue'
import Search from './pages/Search.vue'
import Mine from './pages/Mine.vue'
路由表:
export default [
{
path: '/',
componebt: 'Index',
childern: [
{
path:'/position',
component : Position,
},
{
path:'/search',
component : Search
},
{
path:'/mine',
component : Mine
},
]
}
]
2.首页 更改入口
index.html
<router-view></route-view>
index.vue
<router-view></route-view>
index.vue
import {routerLink} from 'vue-router'
//声明式跳转
<router-link :to='{name:'Detail',params:{xid:123}}'>
去详情页
</router-link>
获取:this.$route.params.xid
编程时跳转
this.$router.history.push({name:'Detail',params:{xid:123}})
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。