vue-router基本理解

vue-router介绍、安装

先来了解一下routing（路由）：是指通过互联的网络把源地址的信息传递给目的地址的活动。

vue是单页面应用（SPA），顾名思义就是只有一个主页面的应用，所有页面内容都包含在主页面内，优点很明显，前后端分工明确，使用组件化思想，不依赖页面，速度快，内容的改变不会重新加载整个页面，对服务器压力也小；缺点是首次加载需要载入所有html,css,js等，速度慢。

说完了单页面应用，我们也了解到vue是基于组件的，而组件之间的跳转，就用到了vue-router，这也是vue的核心之一。

vue-router 是官方插件，用于设定访问路径，并把组件和路径映射起来，当需要别的页面时，通过前端路由就可以把请求到的资源渲染到页面上，无需重新加载页面。

安装 ：由于安装了webpack，所以直接可以Npm安装。

npm install vue-router --save

基本使用

如果在创建项目时没有选router，要在src文件夹中新建router文件，并在内新建index.js文件来配置.

1. 进入router文件夹里的index.js 导入router、vue对象和用到的组件（这里使用慢加载）
2. 调用Vue.use(VueRouter)方法，安装路由功能。
3. 创建路由实例，配置路由映射（path是路径，component是对应组件）。
4. 到处路由实例，在main.js中导入，并挂载到vue实例中。

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = ()=>import('../components/vue-router/Home.vue')
const About = ()=>import('../components/vue-router/About.vue')

Vue.use(VueRouter)

const routes = [
    {
        path:'/',
        component:Home
    },
    {
        path:'/home',
        component:Home
    },
    {
        path:'/about',
        component:About
    }
]

const router = new VueRouter({
    routes,
    mode:'history'
})

export default router

就此配置完成，可以使用了

使用有两种方式：

1. router-link标签 直接在组件中使用<router-link to='/home'>,其中还有三个属性，tag,replace,active-class
2. js方式 比如监听点击

methods:{
	click(){
		this.$router.push('/home')
	}
}

最后<router-view/>展示。

router-link的补充
我们默认渲染的是< a>，如果想变成按钮，只需要在后面写tag

replace:不可返回

当不用router-link时，可以通过绑定方法，编写this.$router.push改变路径来调用组件

动态路由
实际上路由跳转并没有那么简单，当用户需要携带自己的信息进行跳转时，需要带上自己的id，进行和组件的匹配。所有用户都会映射到相同的路由，当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 组件的模板，输出这就称之为动态路由。

动态路由先创建组件，在index配置，注意需要动态改变的需要v-bind绑定，然后在router-link中拼接上对应的动态东西，然后再组件里通过this.$route.params.abc来获取参数。

 {
        path:'/about/:id',
        component:About
    }

 <div>{{$route.params.id}}</div>

$router:index配置的路由映射
$route:是router实例，哪个活跃就是谁

路由嵌套
当一个组件内想展示不同的内容，如home里面有news和message两个不同页面，这时就可以使用路由嵌套。

使用方法，在该组件内添加子路由，在组件内使用router-view展示。

 {
        path:'/about/:id',
        component:About,
        children:[
            {
                path:'/about/child',
                component:child
            }
        ]
    }

传递参数方式
思路回到刚才的动态路由，需要给路由传递参数，而传参有两种方式，方式不同，获取参数的方式也不同。
主要有两种类型: params和query

1. params（就是刚才那种方法）：
   配置路由格式: /router/:id
   传递的方式: 在path后面跟上对应的值
   传递后形成的路径: /router/123, /router/abc

2. query的类型:
   配置路由格式: /router, 也就是普通配置
   传递的方式: 对象中使用query的key作为传递方式
   传递后形成的路径: /router?id=123, /router?id=abc

    <router-link :to="{
      path:'/home',
      query:{name:'ming',age:18}
    }">query传参
    </router-link>

两种获取参数方式

$route.params
$route.query

$ route和$ router是有区别的 😒 router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
$route为当前router跳转对象里面可以获取name、path、query、params等

导航守卫
vue-router的导航守卫是用来监听路由的进入和离开，进入时调用beforeEach，需要调用next()；离开时调用afterEach，不需要主动调用next()函数。
使用情景：我们可以利用beforeEach来完成标题的修改.
导航钩子的三个参数解析:

1. to 即将进入目标的路有对象
2. from 当前导航即将离开的路由对象
3. next 调用之后才能进入下一个钩子。

{
        path:'/about/:id',
        component:About,
        children:[
            {
                path:'/about/child',
                component:child
            }
        ],
        meta:{
            title:'关于'
        }
    }

const router = new VueRouter({
    routes,
    mode:'history'
})

router.beforeEach((to,from,next) => {
    window.document.title = to.meta.title
    next()
})

** keep-alive**
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
两个非常重要的属性:
include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

不包含profile组件
< keep-alive exclude='profile'>

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存

也就是说，放进keep-alive中就能不会被销毁，不管怎么切换都是切换之前用户操作的界面