vue-router笔记

1.vue-router 安装

　　在安装webpack模块时就安装了

　　　　eg： vue  init  webpack  demo    (安装webpack模块并取名为demo）

　　在安装模块时没有安装的话，可以

　　　　npm install vue-router --dev-save

2.基本路由

　　components目录下写路由后的.vue页面

　　router/index.js 写路由的内容（导入和路径描写）

　　App.vue下写路径指引（router-link to=“”）

3.子路由

　　components目录下写路由后的.vue页面；

　　子路由的父路由的想要显示子路由内容的地方写 router-view

　　router/index.js的子路由的路径要写在子路由的父路由的children属性下，格式与routers相同

　　eg：　　　

　　// 子路由　　// {　　//   path: '/Hi',　　//   component: Hi,　　//   children: [　　//     {path: '/', name: 'Hi',component: Hi},　　//     {path: 'Hi1', name: 'Hi1',component: Hi1},　　//     {path: 'Hi2', name: 'Hi2',component: Hi2},　　//   ]　　// }

4.使用name进行参数传递

　　直接使用{{router.name}}进行参数传递

　　或者是

　　　　绑定+引用

　　绑定：

　　　　router-link:to="{name:'demo',params:{username:'xiao_ruo_ji',id:'666'}}"

　　引用：

　　　　{{$route.params.username}}-{{$route.params.id}}

5.多路由操作

　　创建多个router-view

　　使用name来区分每个router-view

　　router/index.js里面的components进行配置（默认名称为default）

　　eg：　　　　

　　　　// 多路由操作　　　　// {　　　　//   path: '/',　　　　//   name: 'HelloWorld',　　　　//   components: {　　　　//     default:HelloWorld,　　　　//     left:Hi1,　　　　//     right:Hi2　　　　//   }　　　　// },

6.url传参　　（定义）直接在/router/index.js的path中使用“:”来进行参数绑定，绑定的过程中还可以使用“（正则表达式）”来进行参数类型限制，哦，对了，不要忘记导入。　　（传参）App.vue中进行使用routerlink to=“路径/参数1/参数2/...”　　（引用/参数获取）　　　　components目录下对应的文件中{{$route.text.text}}进行导入　　　　eg：　　　　<p>NewsTitle:{{$route.params.newsTitle}}</p>

7.重定向　　用途：url不同，页面相同　　eg：　　index.js中　　{　　　　path:'/goHome',　　　　redirect:'/'　　}　　或者是（path）　　{　　　　path:'/goParams/:newsId(\\d+)/:newsTitle'　　}　　然后在App.vue中引用　　<router-link to:"/goParams/178/xiao-bai">goParams</router-link>

8.alias别名　　index.js路由最后　　alias:'/another_name'　　　与重定向的区别：　　　　alias的url中显示的是别名　　　　redirecter的url中显示的是重定向后的url

9.简单路由过渡动画　　transition标签包裹路由 name="fade" mode="out-in" ||"in-out"　　eg:　　　　<transition name="fade" mode="out-in">　　　　<router-view />　　　　<router-view name="demo" />　　</transition>

　　css(style)中:　　.fade-enter{　　opacity:0;　　　　}

　　.fade-enter-active{ 　　 transition:opacity .3s;　　}　　.fade-leave{　　  opacity:1;　　}　　.fade-leave-active{　　  opacity: 0;　　  transition:opacity .3s;　　}

10.mode用法与404页面的添加　　/router/index.js下的　　　　routers的第一个属性　　　　　　mode　　　　可以有两个值　　　　　　history（不显示‘#’）　　　　　　hash（默认）

　　404页面　　　　只需要在components目录下自己写个404页面　　　　然后在routers的path中使用“*”来定位即可

11.钩子函数　　(to,from,next)=>{

    next({path:'/'});   //跳转到"/"}

注意:next（）相当于是个开关，没有它，就不会执行后面的东西。可以根据to、from的内容对next进行开关控制1.钩子函数可以放到路由中，eg：   {        path:'/params/:newsId(\\d+)/:newsTitle',        name:'params',        component:params,        beforeEnter:(to,from,next)=>{        console.log(to);        console.log(from);          next();        }    },

12.编程式导航　　前进  后退  返回任意界面

<template>    <div>      <button @click="goBack">后退</button>      <button @click="goGo">前进</button>      <button @click="goHome">返回首页</button>    </div></template>

<script>  export default {    name: 'App',    methods:{      goBack(){        this.$router.go(-1);      },      goGo(){        this.$router.go(1);      },      goHome(){        this.$router.push("/");      }    }  }</script>