今天介绍一下vueCli

安装
第一种 直接下载/CDN
第二种 https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定 版本号 或者 Tag。
在 Vue 后面加载 vue-router，它会自动安装的：
在html中引入：
第三种 npm安装 推荐这种
执行命令 npm install vue-router
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from “vue”
import VueRouter from “vue-router”
Vue.use(VueRouter)
安装并使用路由
第一步
执行命令 npm install vue-router
第二步
在src文件夹下创建一个router文件,在里面创建一个index.js配置文件,内容如下
import Vue from “vue”; //1.引入vue
import VueRouter from “vue-router”; //2.引入路由
import Home from “…/views/Home.vue”; //如果使用其他组件,需要先引入
import Abc from “…/components/Abc.vue”; //同上

Vue.use(VueRouter); //3.很关键不能丢这一步,在vue中注册安装

const routes = [
{
path: “/”, //路径
name: “Home”, //命名路由用的属性名
component: Home, //要渲染的组件,注意组件需要引入
},
{
path: “/about”,
name: “About”,
component: () =>
import("…/views/About.vue"),
},
{
path: “/abc”,
name: “Abc”,
component: Abc,
},
];

//4创建路由实例
const router = new VueRouter({
mode: “history”, //5.配置路由模式,history和hash两种
base: process.env.BASE_URL, //配置根目录
routes, //6.配置路由,路径
});

//5暴露实例
export default router;
介绍
Vue Router 是 Vue.js 官方的路由管理器，或者说是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。
它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。
为什么不能用a标签，这是因为用Vue做的都是单页应用（当你的项目准备打包时，运行npm run build时，就会生成dist文件夹，这里面只有静态资源和一个index.html页面），所以你写的标签是不起作用的，你必须使用vue-router来进行管理。
包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
hash路由和history区别
hash会在路径上添加#,类似锚点,不会跳转防止和后端的路由冲突推荐使用这个
const router = new VueRouter({
mode: “hash”, //路径有#号,推荐这个
// mode: “history”,
base: process.env.BASE_URL,
routes,
});
实现原理
SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。
1）Hash模式：
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。hash 模式的原理是 onhashchange 事件(监测hash值变化)，可以在 window 对象上监听这个事件。
2）History模式：
由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: ‘history’",这种模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。
//router下的index.js文件中
const router = new VueRouter({
    mode: ‘history’,
    routes: […]
})
当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，比较好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
export const routes = [ 
    {path: “/”, name: “homeLink”, component:Home},
    {path: “/register”, name: “registerLink”, component: Register},
    {path: “/login”, name: “loginLink”, component: Login},
    {path: “", redirect: “/”}
]
此处就设置如果URL输入错误或者是URL 匹配不到任何静态资源，就自动跳到到Home页面。
3）使用路由模块来实现页面跳转的方式
方式1：直接修改地址栏
方式2：this.$router.push(‘路由地址’)
方式3：
routre目录
index.ts文件
引入组件 import Aihao from “@views/Aihao”
{
path: “/a”, 路径
name: “Aihao”, //命名路由,可以直接通过名字跳转过来
component: Aihao 组件
},
{
path:’’,
redirect:’/c’ 当输入一个不存在的路径路由重定向位置
},
{
patch:’/b’,
name:‘bb’,
component:Bb,
children:[ //定义二级路由
{
patch:’/b/bbChild1’,
component:bbChilde1
},
{
patch:‘bbChild2’,
component:bbChilde2
},
{
patch:’/b’,
redirect:”/b/bbChild1"
}
]
},
{
path:"/b/:myid",//动态路由
component:b
}

        const router = new VueRouter({
             mode: "history",  //设置他可以把路径上的#号去掉,并会向后端发起对应的请求,如果后端没有配置这个路由会404
            base: process.env.BASE_URL,
            routes
          });

1. router-link
   Home
   会生成a链接 to=‘要跳转的地址’
   2 router-view组件
   通过路由渲染组件
   简单案例
   js代码
   import VueRouter, { RouteConfig } from ‘vue-router’;
   Vue.use(VueRouter);
   import Vue from “vue”; //引入vue
   import VueRouter from “vue-router”; //1引入路由
   // import Home from “…/views/Home.vue”; //引Home入组件
   import Home from “@/views/Home.vue”; //@指向src文件

Vue.use(VueRouter); //2使用路由

//4配置路由
const routes = [
{
path: “/”,//4.1配置路径
name: “Home”, //可以省略
component: Home,//4.2要加载的路由
},
{
path: “/about”,
name: “About”,
component: () =>
import(/* webpackChunkName: “about” */ “…/views/About.vue”),
},
];

//3 实例化路由
const router = new VueRouter({
mode: “hash”, //路径有#号,推荐这个
// mode: “history”,
base: process.env.BASE_URL,
routes,
});
export default router;
html代码

Go to Foo
Go to Bar

3 路由配置 动态路由 path:"/list/:id" { // 动态路由 path:"/list/:id", //:id动态路由参数 component:()=>import('@/views/List.vue')

}
/list/haha
{{ KaTeX parse error: Expected 'EOF', got '}' at position 17: …oute.params.id }̲}//haha 模板中使用…route.params.xx
嵌套路由 children[{}]
{
//嵌套路由
path:"/parent",
component:()=>import(’@/views/Parent.vue’),
//children要被嵌套的子组件数组
children:[
{
path:“child1”, //不用写/
component:()=>import(’@/views/Child1.vue’)
}
]
}
http://localhost:8081/parent/child1
父级路由使用 组件
命名路由 name:‘uname1’
{
// 命名路由
path:"/uname",
name:‘uname1’,//name定义名字
component:()=>import(’@/views/Uname.vue’)
}
命名路由|
命名试图



{
// 命名试图
path:"/uname_aa",
components:{
//使用components
default:()=>import(’@/views/Uname.vue’),//默认加载没有名字的试图组件中
aa:()=>import(’@/views/Aa.vue’), //name为aa的试图组件
bb:()=>import(’@/views/Bb.vue’),

}

}
4 重定向redirect
{
path:"/redi",
// redirect:"/"//可以直接写要重定向到的路由,
redirect:{
//也可以写成命名路由格式
name:“uname1”
},
redirect:function(){
//函数写法
//return “/”
return ‘{name:“uname1”}’
}
}
redirect:“路径”
redirect:{
name:“命名路由”
}
redirect:function(){
return “路径”
}
注意 函数里面要是有形参,在函数里面必须要使用一下否则报错
redirect:function(){
return {
name:“About”
}
}
5 别名 alias
{
path:"/redi",
name:“uname1”,
alias:"/bb",
component:Home
},

}
6 导航
第一种 声明试导航
切换到a组件
使用router-link-active可以设置选中效果
tag 可以设置以什么元素显示
第二种 编程试导航(js操作路由)
组件中添加

this.$router.push(’/c/’+id)

        <!-- 名字跳转 -->
        this.$router.push({name:'aihao',params:{myid:id}})
            //其中myid要和你动态路由:后面自定义名字一样 
	路由实例
		this.$router //路由实例
	返回上一页
		this.$router.go(-1) 
		this.$router.back()
	前进一页
		this.$router.go(1) //forward
	跳转指定页面 push
		路径跳转
			 this.$router.push('/about') 
		名字跳转
			this.$router.push({name:"aname1"})
			添加参数query
				this.$router.push({
name:"About",
query:{
name:"张三"

}
})
会在url上使用get传参 ?name=张三
组件中接收 this.$route.query.nameparamsthis.$router.push({
name:“About”,
params:{
name:“张三”
}
})
注意params和path同时使用,params无效
this.$router.push({
path:"/about",
params:{
name:“张三”
}
})
使用 $route.params接收//模板语法this.$router.push({
path:/about/${name}
})
replace (和push的区别是,替换没有当前被替换路由的浏览历史)
this.$router.replace{(}^{\prime }/abou{t}^{\prime })7.路由组件传参使用props可以降低耦合度,取代$route
路由代码
{
path:"/about/:id",//动态路由
component:About,
props:true
}

{
path:"/about",//普通路由
component:About,
props:{
id:18
}
}

	模板代码

props:[‘id’]
或者
props:{
id:{
type:Number, //约束类型
default:12 //默认参数
}
}
props:{
id:{
type:Number
},
age:Number,
name:{
type:String,
default:“龙哥”,
required:false //true 必须传参 模式false
}
}
布尔模式
如果 props 被设置为 true，route.params 将会被设置为组件属性。
路由中
{
path:"/about/:id",//动态路由
component:About,
props:true
}
组件中接收
props:[‘id’]
对象模式
如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
路由中
{
path:"/about",//普通路由
component:About,
props:{
id:18
}
}
组件中
props:{
id:{
type:Number, //约束类型
default:12 //默认参数
}
}
函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等

	 props:()=>({name:'张三'})

8. 配置404页面
   当路由匹配不到的时候加载的组件
   //定义到最后,因为路由的优先级是从上到下的
   {
   path:"*",
   component:()=>import(‘a404.vue’)
   }
   9.导航守卫
   全局守卫
   //全局前置守卫
   //to:route 即将要进入的目标路由对象
   //from:route 当前导航正要离开的路由
   //next:function 跳转到一个不同的地址
   router.beforeEach((to , from ,next)=>{
   if(to.name !==‘Login’ && !user){
   next({name:“Login”}) //跳转到login命名路由
   }else{
   next() //允许跳转
   }
   })
   //全局解析守卫
   router.beforeResolve()
   这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
   //全局后置钩子
   //你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to, from) => {
// …路由跳转之后做的操作
})

路由独享守卫
	你可以在路由配置上直接定义 beforeEnter 守卫
	const router = new VueRouter({

routes: [
{
path: ‘/foo’,
component: Foo,
beforeEnter: (to, from, next) => {
// …
}
}
]
})
组件内守卫
beforeRouteEnter
注意: 不能访问this
因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。
不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 vm 访问组件实例
})
}
注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。
beforeRouteUpdate
// 在当前路由改变，但是该组件被复用时调用,通常使用在动态路由中,注意要用导航来触发,别直接修改url
beforeRouteLeave
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
beforeRouteLeave (to, from, next) {
const answer = window.confirm(‘Do you really want to leave? you have unsaved changes!’)
if (answer) {
next()
} else {
next(false)
}
}
案例
const Foo = {
template: ...,
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 this
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate() {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 this
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 this
}
}

触发先后顺序
	在失活的组件里调用 beforeRouteLeave 守卫->

调用全局的 beforeEach 守卫。->
在重用的组件里调用 beforeRouteUpdate 守卫 ->
在路由配置里调用 beforeEnter->
解析异步路由组件_>
在被激活的组件里调用 beforeRouteEnter->
调用全局的 beforeResolve->
导航被确认->
调用全局的 afterEach 钩子->
触发 DOM 更新->
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入
10 路由元信息meta
定义路由的时候可以配置 meta 字段：
一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。
{
path:"/",
meta:{title:“个人中心”}
}
index.js 路由守卫中
router.beforeEach((to,from,next)=>{
to.meta.title 获取
})
11.过渡动效
单个路由过渡
多个路由过渡使用 注意设置key