vue-4-3 路由

小知识:

　　ul与li快速写法：
　　　　ul>li{新闻$}*4  + tab

　　结果：
    　　<ul>
      　　<li>新闻1</li>
      　　<li>新闻2</li>
      　　<li>新闻3</li>
      　　<li>新闻4</li>
    　　</ul>

1. 路由嵌套，给路由条目中添加子路由

　　1. index.js中：路由条目/home下添加子路由

{
        path: '/home',
        component: Home,
        children:[
            {
                path: '',
                redirect:'news'
            },
            {
                path: 'news',
                component: HomeNews
            },
            {
                path: 'message',
                component: HomeMessage
            }
        ]
    },

　　2. Home.vue中：

<div>
    <h2>我是HOME</h2>
    <p>home内容</p>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
 </div>

　　3. 同时, 在模板文件夹中增加 HomeNews.vue和HomeMessage.vue

 

2.  路由传参方式：params、query

　　1.  parms 动态路由（路由index.js中，定义path: /user ：动态参数），默认使用params传递参数

<router-link :to=" '/profile' + 变量名">档案</router-link>

　　　　页面获取路由中传递的参数后，使用：

this.$route.params.路由中约定变量名

　　2. query对于动态路由和一般路由的使用.

　　　　1. 在router-link调用某个路由条目时，使用一下方式传参v-bind动态绑定to属性，使用对象{...}传递路由和参数。

<router-link :to="{path: '/profile', query:{name: 'leaf', age: 18}}">档案</router-link>

　　　　2. 不使用router-link标签，而是一般标签时，使用代码跳转路由并传递参数，需要绑定事件进行传参　

<button v-on:click="toProfile">还跳档案</button>

methods:{
    toProfile(){
      this.$router.push({
        path: '/profile',
        query:{
          name: 'sanshao',
          age: 19,
          height: 1.98
        }
      })
    }

　　　　3. 获取传递的参数方法相同： this.$route.query

3. keep-alive标签

　　作用：保持组件不被销毁:destroye生命周期

　　生命周期：beforeCreate、Created(组件创建前和创建后)、beforeMount、Mounted（模板渲染前后）、beforeUpdate、Updated（数据更新前后）、beforeDestroy、Destroyed（组件销毁前后）

　　

    <keep-alive exclude="Home,Profile">
<!--      添加keep-alive后，组件不会被销毁。exclude属性是添加例外用的，添加某组件名后，该组件会被正常销毁，注意多个组件名之间不要加空格-->
      <router-view></router-view>
    </keep-alive>