0927vue，嵌套传参，监听，生命周期

小俊会编码

已于 2022-09-28 08:48:05 修改

阅读量76

点赞数

分类专栏：框架文章标签： vue.js

于 2022-09-27 10:10:19 首次发布

本文链接：https://blog.csdn.net/qq_60555957/article/details/127066329

版权

1.路由传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
<!--网页-->
<div id="app">
    <router-link to="/js?name=czj&age=22" tag="button">军事</router-link>
    <router-link to="/ty/czj/18" tag="button">体育</router-link>
    <hr>
    <router-view></router-view>
</div>
<!---->
<template id="js">
    <div>
        <p>军事{
  {this.$route.query.name}}</p>
    </div>
</template>
<template id="ty">
    <div>
        <p>体育{
  {this.$route.query.name}}</p>
    </div>
</template>
<!--脚本-->
<script>
    //定义路由组件
    const js={
        template: '#js',
        created: function (){   //生命周期方法
            console.log(this.$route);
            console.log(this.$route.query.name);
            console.log(this.$route.query.age);
        }
    }
    const ty={
        template: '#ty',
        created: function (){
            console.log(this.$route);
            console.log(this.$route.params.name);
            console.log(this.$route.params.age);
        }
    }
    //定义路由规则
    const routes=[
        {path: '/js',component:js},     //参数存于$route.query中
        {path: '/ty/:name/:age',component:ty}  //参数存于$route.params中
    ]
    //创建路由实例
    const router = new VueRouter({
        routes:routes
    })
    //vue对象控制对应网页
    var vue = new Vue({
        el: '#app',
        router: router,
        data: {  //定义网页使用的参数
            name: '张麻子'
        }
    })
    //1.const定义的变量不可以修改
    //2.var定义的变量可以修改,如果不初始化则会输出undefine,不会报错
    //3.let是块级作用域,在函数内部用let定义变量,对函数外无影响
</script>
</body>
</html>