【Vue】12 VueRouter Part2 路由与传参

【编程式导航】

我们希望在路由跳转之前执行某一些功能。。。

<template>
  <div id="app">
      <h2>这是App.vue组件的标题</h2>
      <router-link to="/home"> 首页 </router-link>
      <br>
      <router-link to="/sample" > 样本 </router-link>
      <br>
      <button @click="avent"> 事件跳转首页 </button>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
    name: 'App',
    methods : {
        avent() {
            console.log('跳转到首页');
            this.$router.push("/home");
        }
    }
}
</script>

<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
</style>

效果：

【懒加载路由】

打包之后JS文件会非常庞大，影响到页面的加载

如果我们能让不同的路由，对应的组件分割成不同的代码块

路由被访问的时候才能被加载组件，这样就高效了

路由懒加载的作用是由路由对应的组件打包成一个小的JS代码块

只有这个组件的路由被访问时才会加载JS代码块

index.js中配置：

import Vue from 'vue';
import VueRouter from "vue-router"; // 导入路由插件

//import home from "../components/home";
//import sample from "../components/sample";

const home = () => import('../components/home'); // 头部声明式 懒加载

Vue.use(VueRouter); //注入路由插件
const routes = [
    { path : '/home', component : home },
    { path : '/sample', component : () => import('../components/sample') } // 对象内直接声明 懒加载
]; // 定义路由
const router = new VueRouter({ // 创建路由实例
    routes,
    mode : 'history'
});
export default router; // 导出路由实例

不知道啥问题。。。

【路由嵌套】

在首页组件中又设置了两个连接路由：

<template>
    <div>
        <h2>这是首页组件</h2>
        <p>这是首页的内容</p>

        <router-link to="/news"> 新闻 </router-link>
        <br>
        <router-link to="/msg"> 消息 </router-link>
    </div>
</template>

<script>
    export default {
        name: "home"
    }
</script>

<style scoped>

</style>

可以看到首页下面这两个组件：

然后点击新闻发现，上一级的首页组件不能保存：

所以我们需要嵌套路由，首先

首页组件页设置view标签

其次，在indexjs种设置子组件，并放入新闻和消息组件：

import Vue from 'vue';
import VueRouter from "vue-router"; // 导入路由插件

import home from "../components/home";
import sample from "../components/sample";
import news from "../components/news";
import msg from "../components/msg";

Vue.use(VueRouter); //注入路由插件
const routes = [
    {
        path : '/home',
        component : home,
        children : [ // 配置子路由
            { path : '/news', component : news },
            { path : '/msg', component : msg }
        ]
    },

    { path : '/sample', component : sample },
]; // 定义路由
const router = new VueRouter({ // 创建路由实例
    routes,
    mode : 'history'
});
export default router; // 导出路由实例

看起来问题像是解决了

我们地址也一应该保证这样的层级关系：

index.js路由地址：

            { path : 'news', component : news },
            { path : 'msg', component : msg }

【路由传参】

路由跳转可以参数传递，参数分为两种：Params & QueryParams

【Params类型】

配置路由格式：

/new/:id

这样就表示，我们在使用新闻组件的时候需要在后面传id参数

/news/24

如果不给予参数，则组件不会显示

加上参数访问：

【QueryParams】

配置路由方式不变，但是采用的是原生URL参数传递

我这里没用，没有那个效果。。。

控制台也没报错。。。

【Router-Link传参】

        <router-link
                :to="{
                    path : '/home/news',
                    query : {
                        id : 2,
                        name : '张三',
                        age : 23,
                        gender : true,
                        hobby : [1,2,3,4,5]
                    }
                }"
        > 新闻 </router-link>

url地址渲染：

http://192.168.2.174:8080/home/news?id=2&name=%E5%BC%A0%E4%B8%89&age=23&gender=true&hobby=1&hobby=2&hobby=3&hobby=4&hobby=5

【JS代码传参】

<template>
  <div id="app">
      <h2>这是App.vue组件的标题</h2>
      <router-link to="/home"> 首页 </router-link>
      <br>
      <router-link to="/sample" > 样本 </router-link>
      <br>
      <button @click="avent"> 事件跳转首页 </button>
      <br>
      <button @click="toNews"> 事件跳转home2 </button>
      <router-view></router-view>

  </div>
</template>

<script>

export default {
    name: 'App',
    methods : {
        avent() {
            console.log('跳转到首页');
            this.$router.push("/home");
        },
        toNews() {
            this.$router.push({
                path : "/home/news",
                query : {
                    id : 33,
                    name : "阿伟",
                    age : 32,
                    gender : true,
                    others : [1,3,5,7,9]
                }
            });

        }
    }
}
</script>

<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
</style>

点击传递：

http://localhost:8080/home/news?id=33&name=%E9%98%BF%E4%BC%9F&age=32&gender=true&others=1&others=3&others=5&others=7&others=9

【参数获取】

在新闻组件中增加一个控制台打印查看：

<template>
    <div>
        <h2>新闻组建</h2>
        <p>新闻内容</p>
    </div>
</template>

<script>
    export default {
        name: "news",
        created() {
            console.log(this.$route);
        }
    }
</script>

<style scoped>

</style>

访问测试：

这种方法必须要求：id赋值，然后才可以查询参数赋值

试试参数重复赋值时情况如何？

其实在这里就很明确了，params就是我们配置的格式：

改格式要求必须注入参数：RestFul风格

而query可以给也可以不给

现在打印这个参数看看：

console.log(this.$route.params.id);

效果：

【路由监听】

每次请求访问都会被获取到

<template>
  <div id="app">
      <h2>这是App.vue组件的标题</h2>
      <router-link to="/home"> 首页 </router-link>
      <br>
      <router-link to="/sample" > 样本 </router-link>
      <br>
      <button @click="avent"> 事件跳转首页 </button>
      <br>
      <button @click="toNews"> 事件跳转home2 </button>
      <router-view></router-view>

  </div>
</template>

<script>

export default {
    name: 'App',
    methods : {
        avent() {
            console.log('跳转到首页');
            this.$router.push("/home");
        },
        toNews() {
            this.$router.push({
                path : "/home/news",
                query : {
                    id : 33,
                    name : "阿伟",
                    age : 32,
                    gender : true,
                    others : [1,3,5,7,9]
                }
            });
        }
    },
    watch : {
        '$route.path' : function (newVal, oldVal) {
            console.log(newVal);
        }
    }
}
</script>

<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
</style>

请求在这里都会被捕获到：

但是使用地址栏输入的方式就不会捕获

也就是说，这些都是我们在组件中使用的跳转，是由router执行的，这种方式的捕获仅限于router设置的

【$route & $router的区别？】

$router是vue-router的实例，导航到不同的URL中使用$router.push方法

$route是当前router的跳转对象，可获取name,path等等信息