vue-4-3 路由

小知识:

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

　　结果：
    　　

      　　
• 新闻1

      　　
• 新闻2

      　　
• 新闻3

      　　
• 新闻4

    　　

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

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

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

　　2. Home.vue中：

    
我是HOME
    
home内容
    新闻
    消息
    
 

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

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

　　1.  parms 一般是动态路由，也就是路由条目中商定好要穿的动态参数

　　2. query是对一般路由的，也就是没有（/user ：动态参数）动态参数的传参方法

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

档案

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

还跳档案

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

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