前端路由
前端路由,即由前端来维护一个路由规则。实现有两种:
- 利用url的hash:就是常说的锚点(#),JavaScript通过HashChange事件来监听url的改变,IE7及以下需要用轮询;
- 利用HTML5的History模式: 它是url看起来像普通网站那样,以『/』分割,没有#,但页面并没有跳转,不过使用这种模式需要服务端支持,服务端在接收到所有的请求后,都指向同一个html文件,不然会出现404。因此,SPA只有一个html,整个网站所有的内容都在这一个html里,通过JavaScript来处理;
vue-router
安装vue-router插件:
npm install --save vue-router
在src下新建router文件夹,并在其中新建index.js文件,在其中使用Vue.use()加载和配置路由。
//引入Vue
import Vue from 'Vue'
//引入vue-router
import VueRouter from 'vue-router'
//加载路由插件
Vue.use(VueRouter)
//创建路由对象
const router = new VueRouter({
})
//将router对象导出
export default router
在main.js中导入路由对象!!!!
import router from './router'
创建两个组件:=
index.vue:
<template>
<div>首页</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
about.vue:
<template>
<div>介绍页</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
在src/router/index.js中配置路由信息:
//引入Vue
import Vue from 'vue'
//引入vue-router
import VueRouter from 'vue-router'
const Index = () => import('../components/index.vue')
const About = () => import('../components/about.vue')
//加载路由插件
Vue.use(VueRouter)
//创建一个数组来指定路由匹配列表,每一个路由映射一个组件
const routes = [
{
path: '/index',
//这种写法webpack会把每一个路由打包成一个js文件,实现懒加载也防止main.js文件过大
component: Index
},
{
path: '/about',
component: About
}
]
//创建路由对象
const router = new VueRouter({
//使用HTML5的history模式
mode: 'history',
routes
})
//将router对象导出
export default router
在App.vue中使用两个插件:
<template>
<div id="app">
<h2>App</h2>
<router-link to="/index">index</router-link>
<router-link to="/about">about</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
- 设置mode为history会开启HTML5的History路由模式,通过"/“设置路径,如果不配置mode,就会使用”#"来设置路径。
- 运行网页时,<router-view> 会根据当前路由动态渲染不同的页面组件。路由切换时,切换的是,<router-view>挂载的组件,其他内容并不会发生变化。
- 在路由列表里页可以添加一项,当访问的路径不存在时,重定向到首页:
{
path: '*',
redirect: '/index'
}
启动项目:npm run dev
点击a标签切换组件:
通过路由列表的path携带参数
例如『个人主页』的场景,路由的一部分是固定的,一部分是动态的:/user/123456,其中用户id『123456』就是动态的,但是他们路由到同一个页面,在这个页面里,期望获取这个id,然后请求相关数据。
配置如下:
{
path: '/user/:id',
component: () => import('../components/user.vue')
}
创建user.vue组件:
<template>
<div>
<h2>个人主页</h2>
<!-- this.$route可以访问到当前活跃路由的很多信息。 -->
<p>{{$route.params.id}}</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
浏览器访问:localhost:8080/user/33333
<router-link>的属性
- tag: tag可以指定渲染成什么标签,比如<router-link to="/about" tag=“li”> 渲染的结果就是<li>标签,而不是<a>标签
- replace: 使用replace不会留下History记录,所以导航后不能用后退键返回上一个页面,如<router-link to="/about" replace>
- active-class: 当<router-link>对应的路由匹配成功时,会自动给当前元素设置一个名为router-link-active的class,设置prop:active-class可以修改默认的名称
vue-router的两种跳转页面方法
- 使用内置的<router-link>组件,它会被渲染为一个<a>标签
<template>
<div>
<h1>首页</h1>
<router-link to="/about">跳转到about</router-link>
</div>
</template>
- 使用router实例的方法
<template>
<div>
<h1>介绍页</h1>
<button @click="handleRouter">跳转到user</button>
</div>
</template>
<script>
export default {
methods: {
handleRouter() {
this.$router.push('/user/123');
}
}
}
</script>
$router还有一些其他方法:
- replace: 类似<router-link>的replace功能,它不会向history添加新记录,而是替换掉当前的history记录,如:this.$router.replace(’/user/123’);
- go:类似window.hisroty.go(),在history记录中向前或后退多少步,参数为整数,例如:
//后退1页
this.$router.go(-1)
//前进2页
this.$router.go(2)