vue--9.路由

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

1.路由插件集成和配置

1.环境配置：

         vue creat init

         cd init

         npm run serve

2.跳转路由

router-view和router-link 标签：

      （1）router-view：相当于 路由网址匹配到的组件 会渲染到当前组件的这个标签上。

      （2）router-link：相当于a标签,给我们提供跳转到某个路由的功能,如果没有匹配到路由就会跳转失败:

         xx

       编程式跳转: this.$router.push({path:"路由"})

跳转路由的方式：

a标签和router-link标签的区别：

（1）a标签会请求服务器，然后刷新网页，因此用在链接外部网页
（2）router-link它渲染到页面也是a标签，但是只是改变了地址栏的网址并没有重新加载网页
（3）路由的底层就是采用的history去监听地址栏的变化，然后把当前app组件中的router-view切换了。因此 router-link这种跳转用在网站内部的路由跳转

3.query传参和动态路由传参

两者传参的区别：

        query传参是把参数放在querystring字段中，动态路由传参是把参数放在pathname中

3.1 query传参

路由传参有2种方式

        传递的参数都在路由信息对象中: 路由对应的组件中获取 this.$route

3.1 query传参

        //2种传参:

        to="/xx?name=karen&pwd=123">go
        this.$router.push({path:"/xx",query:{name:"karen",pwd:123}})     

         //在路由匹配的组件中获取数据:
        mounted(){let queryObj=this.$route.query}

传参的四种方式：

 query示例如下：

（1）主页面如下：

（2）跳转的页面(接收数据)：

3.2动态路由传参

3.2动态路由传参

        //设计:
        const router=new VueRouter({
             routes:[
                 {path:"/home/:id",component:()=>import("./home.vue")},
                 {path:"/about",component:()=>import("./about.vue")}]
         })

//2种传参:
 to="/home/123">go
 this.$router.push({path:"/home",params:{id:123}})

//在路由匹配的组件中获取数据:
mounted(){let paramsObj=this.$route.params}

动态路由传参步骤：

动态路由传参示例如下：

（1）注册(router里面的index.js中去注册)

（2）注册的news文件里

 

4.注册子路由

子路由的实现方式：

（1）在router里面的index.js文件里面去注册子路由：

（2）然后一定要在a文件里面写：

5.跳转的其他方式和路由模式

 5.1 路由嵌套--子路由跳转

*代表所有匹配都通过

redirect代表重定向

//注意:子路由中的匹配地址不要在前面加/ 否则就会认为是根路由

子路由嵌套：

组件中跳转：

跳转总结:

        注册路由时,路由路径不要在前面加 斜杠

        跳转路由时 1.path里写的路径必须前面加斜杠 从根路由路径开始写 2.不用path 直接使用name