【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等等信息

 

posted @ 2020-07-26 20:49  emdzz  阅读(245)  评论(0编辑  收藏  举报