vue-router
- 路由，其实就是指向的意思
- 当我点击页面上的Home按钮时，页面中就要显示home的内容，如果点击页面上的about按钮，页面中就要显示about的内容。
- Home按钮 => home内容，about按钮 => about内容，也可以说是一种映射。
- 所以在页面显示中，有两个部分，一个是需要点击的部分，一个是点击之后，显示点击内容的部分。
路由中有三个基本的概念route,routes,router
- 1、route ,它是一条路由，由这个英文单词也可以看出，它是单数，Home按钮 => home内容，这是一条route，about按钮 => about内容,这是另一条路由。
- 2、routes是一组路由，把上面的每一条路由组合起来，形成一个数组。[{Home按钮 => home内容},{about按钮 => about内容}]
- 3、router是一个机制，相当于一个管理者，它来管理路由。因为routes只是定义了一组路由，它放在那里是静止的，当真正来了请求，怎么办？就是当用户点击Home按钮的时候怎么办？这时router就起作用了，它到routes中去查找，去找到对应的home内容，所以页面中就显示了home内容。
- 4、客户端中的路由，实际上就是dom元素的显示和隐藏。当页面中显示home内容的时候，about中的内容全部隐藏，反之也是一样。客户端路由由两种实现方式：基于hash和基于html5 history api.
vue-router中的路由也是基于上面的内容来实现的
- 在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的，我们只要把路径和组件对应起来就可以了，然后在页面中把组件渲染出来。
1， 页面实现（html模版中）
- 在vue-router中, 我们也可以看到它定义了两个标签
<router-link>和<router-view>。<router-link>就是定义页面中点击的部分，<router-view>就是点击后，显示内容的部分。所以<router-link>还有一个非常重要的属性 to， 它定义 点击之后，要到哪个路径下 ， 如：<router-link to="/home">Home</router-link>
2， js 中配置路由
-
首先要定义route, 一条路由的实现。它是一个对象，最基本的一条路由由两个部分组成： path: component. path 指路径，component 指的是组件。如：
-
我们这里有两条路由，组成一个routes:
const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ] -
最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
const router = new VueRouter({ routes // short for routes: routes }) -
配置完成后，把router 实例注入到 vue 根实例中,就可以使用路由
const app = new Vue({ router }).$mount('#app') -
执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性， 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home} path 一一对应，从而找到了匹配的组件， 最后把组件渲染到
标签。所有的这些实现才是基于hash 实现的。
一、vue-router配置字路由
import Vue from 'vue'
import Router from 'vue-router'
import Hi from '@/components/Hi' //父
import Hi1 from '@/components/Hi1' //子
import Hi2 from '@/components/Hi2' //子
Vue.use(Router)
export default new Router({
routes: [
{
path:'/',
component:Hi,
children:[
{path:'/',component:Hi},
{path:'hi1',component:Hi1},
{path:'hi2',component:Hi2},
]
}
]
})
二、vue-router参数传递
1、用name传递参数
-
1.在路由文件src/router/index.js里配置name属性。
routes: [ { path: '/', name: 'index', component: index } ] -
2.模板里(src/App.vue)用$route.name的形势接收，比如直接在模板中显示：
<p>{{ $route.name }}</p> -
注意：不常用
2、通过<router-link>标签中的to传参
-
用
<router-link>标签中的to属性进行传参，要将to进行一个绑定，写成:to<router-link < :to="{name:xxx,params:{key:value}}">valueString</router-link> -
to前面是带冒号的，后边跟的是一个对象形式的字符串
-
name：就是我们在路由配置文件中起的name值
-
params：就是我们要传的参数，是对象形式，在对象里可以传递多个值。（key:value）
-
src/App.vue里的
<router-link>标签<router-link :to="{name:'index',params:{username:'haha',age:18}}">index页面</router-link> -
src/router/index.js
{ path: '/', name: 'index', component: index } -
src/components/index.vue模板里用$route.params.username进行接收
{{ $route.params.username }} {{ $route.params.age }}
三、单页面多路由区域操作
-
“单页面多路由区域操作”，实际需求是这样的，在一个页面里我们有2个以上
<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。例如我们在src/App.vue里加上两个<router-view>标签。我们用vue-cli建立了新的项目，并打开了src目录下的App.vue文件，在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。 -
src/App.vue
<router-view ></router-view> <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view> <router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view> -
src/router/index.js
import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' import Hi1 from '@/components/Hi1' import Hi2 from '@/components/Hi2' Vue.use(Router) export default new Router({ routes: [ { path: '/', components: { default:Hello, left:Hi1, right:Hi2 } } ] }) -
src/components/Hello.vue
<template> <div> <h2>{{ msg }}</h2> </div> </template> <script> export default { name: 'Hello', data () { return { msg: 'I am Hello page.' } } } </script> -
src/components/Hi1.vue
<template> <div> <h2>{{ msg }}</h2> </div> </template> <script> export default { name: 'Hi1', data () { return { msg: 'I am Hi1 page.' } } } </script> -
src/components/Hi2.vue
<template> <div> <h2>{{ msg }}</h2> </div> </template> <script> export default { name: 'Hi2', data () { return { msg: 'I am Hi2 page.' } } } </script> -
src/App.vue
<div> <router-link < to="/">首页</router-link> | <router-link to="/hi">Hi页面</router-link> </div>
四、vue-router ---url传递参数
1、:冒号的形式传递参数
-
1.src/router/index.js配置路由
{ path:'/news/:newsId/:newsTitle', component:news } -
传递参数是新闻id(newsId)和新闻标题（newsTitle）
-
2.创建src/components/news组件
<template> <div> <h2>{{ msg }}</h2> <p>新闻ID：{{ $route.news.newsId}}</p> <p>新闻标题：{{ $route.news.newsTitle}}</p> </div> </template> <script> export default { name: 'news', data () { return { msg: 'news page' } } } </script> -
3.src/App.vue
<router-link to="/news/888/hello world">news</router-link>
2、正则表达式在URL传值中的应用
-
希望传递的新闻ID只能是数字的形式
-
加入正则需要在路由配置文件里（src/router/index.js）以圆括号的形式加入
path:'/news/:newsId(\\d+)/:newsTitle' -
加入正则，我们在传递数字以外的其他参数，params.vue组件就没有办法接收到。
五、vue-router的重定向---redirect
- 开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。
1、redirect基本重定向
-
src/router/index.js把原来的component换成redirect参数就可以了
export default new Router({ routes: [ { path: '/', component: index },{ path:'/goback', redirect:'/' //跳到index页面 } ] }) -
这里我们设置了goback路由，但是它并没有配置任何component（组件），而是直接redirect到path:’/’下了，这就是一个简单的重新定向。
2、重定向时传递参数
{
path:'/news/:newsId(\\d+)/:newsTitle',
component:news
},{
path:'/goNews/:newsId(\\d+)/:newsTitle',
redirect:'/news/:newsId(\\d+)/:newsTitle'
}
六、alias别名
-
就像同一个人两个名字而已
-
1.src/router/index.js 给home路径起一个别名，detail
{ path: '/home', component: home, alias: '/detail' }
2.配置我们的<router-link>，起过别名之后，可以直接使用<router-link>标签里的to属性，进行重新定向。
<router-link < to="/detail">detail</router-link>
redirect和alias的区别
- redirect:rdirect是直接改变了url的值，把url变成真实的path路径
- alias:url路径没有改变，这种情况更友好，让用户知道自己访问的路径，只是改变了
<router-view>中的内容
小坑
-
别名请不要用在path为’/’中，如下代码的别名是不起作用的。
{ path: '/', component: index, alias:'/repair' }
七、路由的过渡动画
1、<transition>标签
-
src/APP.vue
<transition name="fade"> <router-view ></router-view> </transition>
2、css过渡类名
-
1.fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
-
2.fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
-
3.fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧立刻删除。
-
4.fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
.fade-enter { opacity: 0; } .fade-enter-active { transition: opacity .5s; } .fade-leave { opacity: 1; } .fade-leave-active { opacity: 0; transition: opacity .5s; }
3、过渡模式mode
-
in-out:新元素先进入过渡，完成之后当前元素过渡离开
-
out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。
<transition name="fade" mode="out-in"> <router-view ></router-view> </transition>
八、mode的设置和404页面的处理
- 路由属性中的mode
1、mode的两个值
-
src/router/index.js
export default new Router({ mode: 'history', routes: [] }) -
1.history： 当你使用history模式时，URL就像正常的url, (http://localhost:8080/news)
-
2.hash: 默认'hash'值（http://localhost:8080/#/news）
2、404页面的设置
-
1.src/router/index.js
{ path: '*', component: Error } -
这里的path:’*’就是找不到页面时的配置，component是我们新建的一个Error.vue的文件。
-
2.新建404页面
-
src/components/文件夹下新建一个Error.vue的文件
<template> <div> <h2>{{ msg }}</h2> </div> </template> <script> export default { data () { return { msg: 'Error:404' } } } </script>
九、路由中的钩子
1、写在配置文件中的钩子函数
{
path:'/news/:newsId(\\d+)/:newsTitle',
component:news,
beforeEnter:(to,from,next)=>{
console.log('我进入了params模板');
console.log(to);
console.log(from);
next();
}
}
- 在news路由里配置了bdforeEnter得钩子函数，函数我们采用了ES6的箭头函数，需要传递三个参数
2、参数
- 1.to:路由将要跳转的路径信息，信息是包含在对象里面的。
- 2.from:路径跳转前的路径信息，也是一个对象的形式。
- 3.next：路由的控制参数，常用的有next(true)和next(false).
3、写在模板中的钩子函数
-
在配置文件中的钩子函数，只有一个钩子-beforeEnter，如果我们写在模板中就可以有两个钩子函数可以使用：
-
beforeRouteEnter：在路由进入前的钩子函数。
-
beforeRouteLeave：在路由离开前的钩子函数。
export default { name: 'news', data () { return { msg: 'news page' } }, beforeRouteEnter:(to,from,next)=>{ console.log("准备进入路由模板"); next(); }, beforeRouteLeave: (to, from, next) => { console.log("准备离开路由模板"); next(); } } </script>
十、编程式导航
- this.$router.go(-1)
- this.$router.go(1)
- this.$router.push('/xxx ')
