vue的路由Route安装和使用

路由

​ 在vue中，route,即为前端路由。下面是专业名词解释：

前端渲染和后端渲染

在使用route之前，我们需要知道一些基础知识：

改变url不刷新页面:

使用hash值来进行变化route。

location.hash("路径")

通过html对象修改url：

history.pushState(data,title,url)

在该基础上，把urlpush进堆栈。然后使用back方法，弹出栈

history.back()

上面是用push方法，就是一直压栈和出栈，下面是用replace来进行代替当前站点，就不是栈方法：

history.replaceState(data,title,url)

使用go来进行前后移动：

history.go(-2)

或者向前:

history.go(2) history.forward()

vue-route的使用

npm install vue-route --save

安装成功后，有在src下有route文件夹：

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' //先使用 vue的uuse来使用vueroute Vue.use(VueRouter) //定义route路由 const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ] //history模式就是我们学的history的go，reward。pushState。replaceState啊等。 const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) //导出route组件 export default router

创建组件

​ 在compoments文件夹下面创建about.vue:

<template> <div> <h2> 我是about页面... </h2> </div> </template> <script> </script> <style scoped> </style>

编写App.vue。创建两个标签，点击哪个，显示哪个页面，运行如下:

第一个页面加载[使用重定向方法]:

{ path: '/', name:'first', redirect: '/pagehome' },

效果：

使用history模式来避免url地址中出现#，在route目录下的index.js中定义：

const router = new VueRouter({ //history模式 mode: 'history', base: process.env.BASE_URL, routes })

route的tag属性

将route-link标签变成button：

<template> <div id="app"> <div id="nav"> <router-link to="/pageHome" tag="button">Home</router-link> | <router-link to="/about" tag="button">About</router-link> <!-- <button>显示主页</button> <button>显示about页面</button> --> </div> <router-view/> </div> </template> <style> </style>

效果:

点击route，对应按钮变红色：

<template> <div id="app"> <div id="nav"> <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> | <router-link to="/about" tag="button" active-class="changecolor">About</router-link> <!-- <button>显示主页</button> <button>显示about页面</button> --> </div> <router-view/> </div> </template> <style> .changecolor{ color:red; } </style>

效果如下：

或者直接在route下面的index.js写：

const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, activeClass: 'changecolor' })

使用按钮替换route-link:

<template> <div id="app"> <div id="nav"> <!-- <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> | <router-link to="/about" tag="button" active-class="changecolor">About</router-link> --> <!-- <button>显示主页</button> <button>显示about页面</button> --> 使用按钮来变化route <button @click="gohome">首页</button> <button @click="goabout">about</button> </div> <router-view/> </div> </template> <script> export default { name: 'App' ,data:{ } ,methods:{ gohome(){ this.$router.push("/pagehome"); } ,goabout(){ this.$router.push("/about"); } } } </script> <style> .changecolor{ color:red; } </style>

也就是说，使用写代码的方法，来变换组件视图,效果如下：

动态路由的使用

​ 什么是动态路由？ 假设我几个用户进入的页面参数是不一样的，那么此情况就是动态路由：

App.vue代码：

<template> <div id="app"> <div id="nav"> <!-- <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> | <router-link to="/about" tag="button" active-class="changecolor">About</router-link> --> <!-- <button>显示主页</button> <button>显示about页面</button> --> 使用按钮来变化route <!-- <button @click="gohome">首页</button> <button @click="goabout">about</button> --> <router-link to="/pagehome">首页</router-link> <router-link to="/about">关于</router-link> <router-link :to="'/user/'+userid">用户界面</router-link> <!-- <router-link>新组件</router-link> --> </div> <router-view/> </div> </template> <script> export default { name: 'App' ,data(){ return { userid: 'zhangsan1' } } } </script> <style> .changecolor{ color:red; } </style>

test.vue代码如下：

<template> <div> 欢迎，这里是用户个人页面 ,你好 : {{$route.params.userId}} </div> </template> <script> export default { name: 'user' } </script> <style scoped> </style>

目录一览：

从保存的cookie得知，账户为zhangsan,那么url显示张三:

认识路由的懒加载

所谓懒加载，就是用到时再加载、

使用例子：

// { // path: '/about', // name: 'About', // // route level code-splitting // // this generates a separate chunk (about.[hash].js) for this route // // which is lazy-loaded when the route is visited. // 路由懒加载 // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') // }

完整使用：

import Vue from 'vue' import VueRouter from 'vue-router' // import Home from '../components/HelloWorld.vue' // import about from '../components/about.vue' // import user from '../components/test.vue' //先使用 vue的uuse来使用vueroute Vue.use(VueRouter) //定义route路由 const routes = [ { path: '/', name:'first', redirect: '/pagehome' }, { path: '/pagehome', name: '首页', component: () => import('../components/HelloWorld.vue') }, // { // path: '/about', // name: 'About', // // route level code-splitting // // this generates a separate chunk (about.[hash].js) for this route // // which is lazy-loaded when the route is visited. // 路由懒加载 // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') // } { path: '/about', name: '关于', component: () => import('../components/about.vue') }, { path: '/user/:userId', component: () => import('../components/test.vue') } ] //history模式就是我们学的history的go，reward。pushState。replaceState啊等。 const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, activeClass: 'changecolor' }) //导出route组件 export default router

构建后，结果：

认识嵌套路由

使用：

创建子组件test2.vue,导出为

<template > <div> <h1>嵌套路由的使用。。。我是about的子组件</h1> <ul> <li >A</li> <li >B</li> <li >C</li> <li >D</li> </ul> </div> </template> <script> export default { name: 'aboutSub', } </script> <style scoped> </style>

路由定义

import Vue from 'vue' import VueRouter from 'vue-router' // import Home from '../components/HelloWorld.vue' // import about from '../components/about.vue' // import user from '../components/test.vue' //先使用 vue的uuse来使用vueroute Vue.use(VueRouter) //定义route路由 const routes = [ { path: '/', name:'first', redirect: '/pagehome' }, { path: '/pagehome', name: '首页', component: () => import('../components/HelloWorld.vue') }, // { // path: '/about', // name: 'About', // // route level code-splitting // // this generates a separate chunk (about.[hash].js) for this route // // which is lazy-loaded when the route is visited. // 路由懒加载 // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') // } { path: '/about', name: '关于', component: () => import('../components/about.vue'), children:[ { path: 'aboutSub', component: () => import ('../components/test2.vue') } ] }, { path: '/user/:userId', component: () => import('../components/test.vue') } ] //history模式就是我们学的history的go，reward。pushState。replaceState啊等。 const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, activeClass: 'changecolor' }) //导出route组件 export default router

在about组件中使用子组件

<template> <div class="about"> <h2> 我是about页面...，我将使用子组件 </h2> <router-link to="/about/aboutSub">显示路由嵌套的子组件</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'about', props: { msg: String } } </script> <style scoped> </style>

在app.vue中定义路由about

<template> <div id="app"> <div id="nav"> <!-- <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> | <router-link to="/about" tag="button" active-class="changecolor">About</router-link> --> <!-- <button>显示主页</button> <button>显示about页面</button> --> 使用按钮来变化route <!-- <button @click="gohome">首页</button> <button @click="goabout">about</button> --> <!-- <router-link to="/pagehome">首页</router-link> --> <router-link to="/about">关于</router-link> <!-- <router-link :to="'/user/'+userid">用户界面</router-link> --> <!-- <router-link>新组件</router-link> --> </div> <router-view/> </div> </template> <script> export default { name: 'App' ,data(){ return { userid: 'zhangsan1' } } } </script> <style> .changecolor{ color:red; } </style>

运行结果