Vue2学习(05)

//创建需要的组件，配置路由规则，写在router文件夹下的单独js文件中，更好维护
const router = new VueRouter({
    routes:[
        //以数组包裹对象的形式，可以一次配置多个路由规则
        {path:'/路径'，component:组件名}
    ]
})


//配置导航，配置路由出口
<div class='类名'>
    <a href='#/路径'> </a>
    .....
</div>
<div class="类名">
    <router-view> 此处是路由出口，匹配的是组件所展示的位置 </router-view>
</div>

三、组件存放的目录问题

.vue文件本质无区别

组件分类：

.vue文件分2类：页面组件和复用组件

页面组件---页面展示---放入views目录内配合路由进行使用
复用组件---数据展示---是小组件可以用于多个页面放入components目录中

绝对路径简写@（代替src）基于@指代src目录，从src目录出发寻找组件

四、声明式导航

1.导航链接

vue-router提供了一个全局组件router-link（取代了a标签，但是浏览器解析时会将其解析成a标签）

<router-link to="/路径"> </router-link>

特点：

能跳转，本质上还是a标签，配置to属性取代了a标签的href属性，并且to属性配置路径的时候不用#
能高亮，默认就会提供高亮类名（2个），但是常用的时router-link-active，可以直接使用这个类名设置高亮样式

2.两个类名

router-link一共有两个高亮类名

router-link-active模糊匹配，例如to = '/my',则可以访问/my以及以/my开头的其他页面
router-link-exact-active精准匹配，to属性配置的是什么路径就只能匹配到此路径

是以，我们常用的高亮类名是模糊匹配router-link-active，我们也可以在路由规则配置中定制高亮类名

//创建需要的组件，配置路由规则，写在router文件夹下的单独js文件中，更好维护
const router = new VueRouter({
    routes:[
        //以数组包裹对象的形式，可以一次配置多个路由规则
        {path:'/路径'，component:组件名}
        ...
    ]，
    linkActiveClass:'类名1',
    linkExactActiveClass:'类名2',
})

3.跳转传参

在跳转路由时，进行传值

3.1查询参数传参---适合传递多个参数

语法格式：

to = '/path?参数名=值&参数名=值&...'
$route.query.参数名  // 对应页面组件接收传递过来的值

在created中发送请求，在模板中使用时可以省略this，获取路由参数---this.$route.query.参数名

为了防止用错route和router，在此处做一个区分$router对象是全局路由的实例，是router构造方法的实例

$route对象表示当前的路由信息，每一个路由都会有一个$route对象（局部对象），包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。---传参

$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vue构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性。----路由跳转用this.$router.push('路由路径')

3.2动态路由传参

3.2.1配置动态路由

//创建需要的组件，配置路由规则，写在router文件夹下的单独js文件中，更好维护
const router = new VueRouter({
    routes:[
        //以数组包裹对象的形式，可以一次配置多个路由规则
        {path:'/路径/:参数名'，component:组件名}
        ...
    ]
})



//配置导航链接
to='/path/参数值'


//对应页面组件接收传递过来的值
$route.parmas.参数名

动态路由参数可选符

-----/path/:参数名--->表示必须要传递参数

-----如果不传递参数也希望能够匹配，可以加一个可选符？--->/path/:参数名?--->即可正常显示组件

4.路由重定向redirect

const router = new VueRouter({
    routes:[
        //以数组包裹对象的形式，可以一次配置多个路由规则
        {path:'匹配路径'，redirect:'重定向到的路径'}
        ...
    ]
})

5.404

当路径找不到匹配的时候，给个提示页面，配置在路由的最后--->routes数组中的最后一条

语法：path："*" (任意路径）----前面不匹配就命中这一个

6.模式设置

hash路由（默认）----基于a标签锚链接实现跳转，地址有#号

history路由（常用）----基于html5historyAPI实现的，地址无#号，以后上线需要服务器端支持

const router = new VueRouter({
    routes:[
        ...
    ]，
    mode:'history'
})

一旦采用history模式就没有#，需要后台配置访问规则

五、编程式导航

1.基本跳转

编程式导航是用JS代码来进行跳转

两种语法：

path路径跳转（简易方便）
name命名路由跳转（适合path路径长的路径）

1.1path路径跳转

//简写写法
this.$router.path('路由路径')



//完整写法----适合传参
this.$router.path({
    path:'路由路径'
})

1.2name命名路由进行跳转

this.$router.push({
    name:'路由名'
})


{name:'路由名'，path:'/path/xxx',component:xxx}

2.路由传参

两种传参方式：查询参数 + 动态路由传参

两种跳转传参对于两种传参方式都支持

2.1path路径跳转传参

//1.1利用查询参数传参简写方法-----$router.query.参数名
this.$router.push('/路径?参数1=参数值1&参数2=参数值2')


//1.2利用查询参数传参完整写法-----$router.query.参数名
this.$router.push({
    path:'/路径'，
    query：{
        参数1：参数值1，
        参数2：参数值2，
        ...
}
})





//2.1动态路由传参简写方法-----$router.params.参数名
this.$router.push('/路径/参数值')


//2.2动态路由传参完整写法-----$router.params.参数名---需要配置路由
this.$router.push({
    path:'/路径/参数值'
})

2.2name命名路由传参

//1利用查询参数传参简写方法-----$router.query.参数名
this.$router.push({
    name:'路由名字'，
    query：{
        参数1：参数值1，
        参数2：参数值2，
        ...
}
})





//2.1动态路由传参简写方法-----$router.params.参数名---需要配置路由
this.$router.push({
    name:'路由名字'，
    params：{
        参数1：参数值1，
        参数2：参数值2，
        ...
}
})

六、如何配置二级路由出口

const router = new VueRouter({
    routes:[
        //以数组包裹对象的形式，可以一次配置多个路由规则
        {
         path:'/路径/:参数名'，
         component:组件名，
         children:[   //嵌套子路由
            {path:'路径',component:组件名}，
                    .....
        ]
        }
        ...
    ]
})

在一级路由组件中配置二级路由出口---<router-view></router-view>

七、组件缓存keep-alive

keep-alive本身是一个抽象的组件，自身不会渲染成一个dom元素，也不会出现在父组件链中，keep-alive在组件切换过程中把切换出去的组件保存在内存中，防止重复渲染dom，减少加载时间以及性能消耗，提高用户的体验性。

<template>
     <div class='类名'>
         <keep-alive>  //只是一个容器
            <router-view></router-view>
         </keep-alive>
     </div>
</template>

在App.vue使用--->一级路由匹配的组件都会被缓存

1.keep-alive的三个属性

include：组件名数组，只有匹配的组件才会被缓存----通用
exclude：组件名数组，任何匹配的组件都不会被缓存
max：与exclude配合使用，表示最多可以缓存多少组件实例

<template>
     <div class='类名'>
         <keep-alive :include="['组件名'，'组件名']">  //只是一个容器
            <router-view></router-view>
         </keep-alive>
     </div>
</template>

被缓存之后会多出来两个生命周期钩子函数：

---->active（激活时，组件被看到时触发）

---->deactived（失活时，离开页面看不见组件时触发）

组件缓存之后，就不会执行组件原来所固有的生命周期函数created、mounted以及destoyed等，所以提供了active和deactivated钩子。