Vue.js--前端路由与vue-router

前端路由

前端路由，即由前端来维护一个路由规则。实现有两种：

• 利用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中使用两个插件：

• 设置mode为history会开启HTML5的History路由模式，通过"/“设置路径，如果不配置mode，就会使用”#"来设置路径。
• 运行网页时， 会根据当前路由动态渲染不同的页面组件。路由切换时，切换的是,挂载的组件，其他内容并不会发生变化。
• 在路由列表里页可以添加一项，当访问的路径不存在时，重定向到首页：

{
	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

的属性

• tag： tag可以指定渲染成什么标签，比如 渲染的结果就是
• 标签，而不是标签
• replace： 使用replace不会留下History记录，所以导航后不能用后退键返回上一个页面，如
• active-class： 当对应的路由匹配成功时，会自动给当前元素设置一个名为router-link-active的class，设置prop：active-class可以修改默认的名称

vue-router的两种跳转页面方法

• 使用内置的组件，它会被渲染为一个标签

<template>
	<div>
		<h1>首页h1>
		<router-link to="/about">跳转到aboutrouter-link>
	div>
template>

• 使用router实例的方法

<template>
	<div>
		<h1>介绍页h1>
		<button @click="handleRouter">跳转到userbutton>
	div>
template>
<script>
	export default {
		methods: {
			handleRouter() {
				this.$router.push('/user/123');
			}
		}
	}
script>

$router还有一些其他方法：

• replace： 类似的replace功能，它不会向history添加新记录，而是替换掉当前的history记录，如：this.$router.replace(’/user/123’);
• go：类似window.hisroty.go()，在history记录中向前或后退多少步，参数为整数，例如：

//后退1页
this.$router.go(-1)
//前进2页
this.$router.go(2)