Vue.js

一、引入

开发环境：<script src="https://cdn.jsdelivr.net/npm/vue"></script>

生产环境：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

二、基本使用

1、声明式渲染
<div id=app>
    {{msg}}
</div>

Vue{
  el:"#app",
  data:{
        msg:"Hello Vue"
   }    
}
Hello Vue


<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
鼠标悬停几秒钟查看此处动态绑定的提示信息！


2、条件与循环
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
现在你看到我了


<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})


3、处理用户输入
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

View Code

三、局部组件（先声明子组件、再挂载子组件、再使用子组件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
        }
        .header {
            height: 50px;
            background-color: aqua;
        }
        .left{
            height: 800px;
            width: 30%;
            background-color: aquamarine;
            float: left;
        }
        .right{
            height: 800px;
            width: 70%;
            background-color: antiquewhite;
            float: right;
        }
    </style>
</head>
<body>

<div id="app">
</div>

<script>
//声明头部组件
var Vheader={
    template:`
        <div class="header" >头部</div>
    `,
};

//声明左侧栏组件
var Vleft={
    template:`
        <div class="left">左边栏</div>
    `
};

//声明右侧栏组件
var Vright={
    template:`
        <div class="right">右边栏</div>
    `,
};

//声明入口组件
var Vmain={
    //使用组件
    template:`
        <div class="main" >
           <Vheader></Vheader>
           <Vleft></Vleft>
           <Vright></Vright>
        </div>
    `,
    //挂载组件
    components:{
        Vheader,
        Vleft,
        Vright,
    }
};

new Vue({
    el:"#app",
    components:{
        Vmain,
    },
    template: '<Vmain ></Vmain>'
})
</script>

</body>
</html>

View Code

四、父组件向子组件传数据（通过props）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
        }
        .header {
            height: 50px;
            background-color: aqua;
        }
        .left{
            height: 800px;
            width: 30%;
            background-color: aquamarine;
            float: left;
        }
        .right{
            height: 800px;
            width: 70%;
            background-color: antiquewhite;
            float: right;
        }
    </style>
</head>
<body>

<div id="app">
</div>

<script>
//声明头部组件
var Vheader={
    template:`
        <div class="header" >{{header}}</div>
    `,
    props:["header",]
};

//声明左侧栏组件
var Vleft={
    template:`
        <div class="left">{{left}}</div>
    `,
    props: ["left",]
};

//声明右侧栏组件
var Vright={
    template:`
        <div class="right">{{right}}</div>
    `,
    props:["right",]
};

//声明入口组件
var Vmain={
    //使用组件
    template:`
        <div class="main" >
           <Vheader v-bind:header="content.header"></Vheader>
           <Vleft v-bind:left="content.left"></Vleft>
           <Vright v-bind:right="content.right"></Vright>
        </div>
    `,
    //挂载组件
    components:{
        Vheader,
        Vleft,
        Vright,
    },
    props: ["content",]
};

new Vue({
    el:"#app",
    components:{
        Vmain,
    },
    template: '<Vmain v-bind:content="content"></Vmain>',
    data:{
        content:{
            header:"头部区",
            left:"左侧区",
            right:"右侧区"
        }
    }
})
</script>

</body>
</html>

View Code

五、子组件通过事件向父组件传递数据（$emit）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .header {
            height: 50px;
            background-color: aqua;
        }
        .left{
            height: 800px;
            width: 30%;
            background-color: aquamarine;
            float: left;
        }
        .right{
            height: 800px;
            width: 70%;
            background-color: antiquewhite;
            float: right;
        }
    </style>
</head>
<body>

<div id="app">
</div>

<script>
//声明头部组件
var Vheader={
    template:`
        <div class="header" >头部</div>
    `,
};

//声明左侧栏组件
var Vleft={
    template:`
        <div class="left">左边栏</div>
    `
};

//声明右侧栏组件
var Vright={
    template:`
        <div class="right">
            <div>这是内容</div>
            <button v-on:click="enlargetext">
                将页面字体放大
            </button>
        </div>
    `,
    methods:{
        enlargetext:function () {
            console.log("执行enlargetext方法");
            //触发事件
            this.$emit('enlarge-text',5)
        }
    }
};

//声明入口组件
var Vmain={
    //使用组件
    template:`
        <div class="main" v-bind:style="{ fontSize: postFontSize + 'px' }" >
           <Vheader></Vheader>
           <Vleft></Vleft>
           <Vright v-on:enlarge-text="onEnlargeText"></Vright>
        </div>
    `,
    //注册组件
    components:{
        Vheader,
        Vleft,
        Vright,
    },
    data: function () {
        return{
            postFontSize: 28
        }
    },
    methods: {
        //定义onEnlargeText方法
        onEnlargeText: function (enlargeAmount) {
        this.postFontSize += enlargeAmount
        },
    }
};

new Vue({
    el:"#app",
    components:{
        Vmain,
    },
    template: '<Vmain ></Vmain>'
})

</script>
</body>
</html>

View Code

六、全局组件的使用（Vue.component("Name",{})，先声明，再使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
        }
        .header {
            height: 50px;
            background-color: aqua;
        }
        .left{
            height: 800px;
            width: 30%;
            background-color: aquamarine;
            float: left;
        }
        .right{
            height: 800px;
            width: 70%;
            background-color: antiquewhite;
            float: right;
        }
    </style>
</head>
<body>

<div id="app">
</div>

<script>

//声明全局组件,第一个参数：全局组件名称，第二个参数(和局部组件类似)：options
Vue.component("Btn-btn",{
    template:`<button>btn</button>`
});


//声明头部组件
var Vheader={
    template:`
        <div class="header" >头部</div>
    `,
};

//声明左侧栏组件
var Vleft={
    template:`
        <div class="left">左边栏</div>
    `
};

//声明右侧栏组件，使用全局组件
var Vright={
    template:`
        <div class="right">
            <p>右边栏</p>
            <Btn-btn></Btn-btn>
            <Btn-btn></Btn-btn>
            <Btn-btn></Btn-btn>
        </div>
    `,
};

//声明入口组件
var Vmain={
    //使用组件
    template:`
        <div class="main" >
           <Vheader></Vheader>
           <Vleft></Vleft>
           <Vright></Vright>
        </div>
    `,
    //挂载组件
    components:{
        Vheader,
        Vleft,
        Vright,
    }
};

new Vue({
    el:"#app",
    components:{
        Vmain,
    },
    template: '<Vmain ></Vmain>'
})
</script>

</body>
</html>

View Code

七、插槽slot及element-ui使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--  element官网：https://element.eleme.cn-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
        }
        .header {
            height: 50px;
            background-color: aqua;
        }
        .left{
            height: 800px;
            width: 30%;
            background-color: aquamarine;
            float: left;
        }
        .right{
            height: 800px;
            width: 70%;
            background-color: antiquewhite;
            float: right;
        }
    </style>
</head>
<body>

<div id="app">
</div>

<script>

//声明全局组件,第一个参数：全局组件名称，第二个参数(和局部组件类似)：options
Vue.component("Btn-btn",{
    template:`<el-button v-bind:type="type"><slot></slot></el-button>`,
    props:['type',]
});


//声明头部组件
var Vheader={
    template:`
        <div class="header" >头部</div>

    `,
};

//声明左侧栏组件
var Vleft={
    template:`
        <div class="left">左边栏</div>
    `
};

//声明右侧栏组件，使用全局组件
var Vright={
    template:`
        <div class="right">
            <p>右边栏</p>
            <Btn-btn v-bind:type="primary">登录</Btn-btn>
            <Btn-btn v-bind:type="success">注册</Btn-btn>
            <Btn-btn v-bind:type="danger">退出</Btn-btn>
        </div>
    `,
    //注意，组件中的data一定要是函数，而且要有返回值
    data:function(){
        return{
            primary:"primary",
            success:"success",
            danger:"danger",
        }
    }
};

//声明入口组件
var Vmain={
    //使用组件
    template:`
        <div class="main" >
           <Vheader></Vheader>
           <Vleft></Vleft>
           <Vright></Vright>
        </div>
    `,
    //挂载组件
    components:{
        Vheader,
        Vleft,
        Vright,
    }
};

new Vue({
    el:"#app",
    components:{
        Vmain,
    },
    template: '<Vmain ></Vmain>'
})
</script>

</body>
</html>

View Code

八、全局过滤器和局部过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <input type="text" v-model="price">
    <!-- 使用局部过滤器-->
    <div>{{price | newPrice}}</div>
    <!--使用全局过滤器-->
    <div>{{msg | reverseCode}}</div>
</div>

<script>
//注册全局过滤器,第一个参数为全局过滤器名称，第二个参数为函数
Vue.filter("reverseCode",
    function(value){
        return value.split("").reverse().join("")
    }
);

new Vue({
    el:"#app",
    data:{
        price:0,
        msg:"Hello Vue!"
    },
    //注册局部过滤器
    filters:{
        newPrice:function (value) {
            return "$"+value
        }
    }
})
</script>

</body>
</html>

View Code

九、侦听器watch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <div>{{fullName}}</div>
</div>

<script>

new Vue({
    el:"#app",
    data:function(){
        return {
            firstName:"hou",
            lastName:"gang",
            fullName:"hou gang",
        }
    },
    watch:{
        firstName: function (value) {
            this.fullName = value +" "+ this.lastName
        },
        lastName: function (value) {
            this.fullName = this.firstName +" "+ value
        }
    }
})

</script>

</body>
</html>

View Code

十、计算属性computed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <div>{{fullName}}</div>
</div>

<script>

new Vue({
    el:"#app",
    data:function(){
        return {
            firstName:"hou",
            lastName:"gang",
            // fullName:"hou gang",
        }
    },
    //侦听器
    // watch:{
    //     firstName: function (value) {
    //         this.fullName = value +" "+ this.lastName
    //     },
    //     lastName: function (value) {
    //         this.fullName = this.firstName +" "+ value
    //     }N
    // },
    //计算属性
    computed:{
        fullName:function () {
            return this.firstName + ' ' + this.lastName
        }
    }
})

</script>

</body>
</html>

View Code

十一、音乐播放器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .active{
            color: red;
            background-color: aquamarine;
        }
    </style>
</head>
<body>

<div id="app">

    <!--    3、添加播放器,注：mp3s[checkIndex].src，可以改为mp3s[startIndex].src，这样就不需要计算属性了-->
    <audio v-bind:src="mp3s[checkIndex].src" controls autoplay></audio>
    <!--    4、循环清单-->
    <li v-for="mp3 in mp3s" v-on:click="checkMp3(mp3.index)" :class="{active:checkIndex===mp3.index}">
        {{mp3.title}}
    </li>
</div>

<script>

    //1、音乐数据结构
    MP3=[
        {
            index:0,
            title:"李春波-小芳",
            src:"./mp3/李春波 - 小芳.mp3"
        },
        {
            index:1,
            title:"林志颖 - 稻草人",
            src:"./mp3/林志颖 - 稻草人.mp3"
        },
        {
            index:2,
            title:"陈百强 - 偏偏喜欢你",
            src:"./mp3/陈百强 - 偏偏喜欢你.mp3"
        },
        {
            index:3,
            title:"齐秦 - 我拿什么爱你",
            src:"./mp3/齐秦 - 我拿什么爱你.mp3"
        },
    ];


new Vue({
    el:"#app",
    data:function(){
        return {
            //2、定义歌曲变量，传递给前端循环获取歌曲使用
            mp3s:MP3,
            startIndex:0
        }
    },
    methods:{
        checkMp3:function (index) {
            this.startIndex = index
        }
    },
    computed:{
        checkIndex:function () {
            return this.startIndex
        }
    }
})

</script>

</body>
</html>

View Code

十二、组件生命周期钩子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">

</div>

<script>

    var Test={
        template: `<div>AAA</div>`,
        data:function(){
          return{
              msg:"MSG"
          }
        },
        //在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
        beforeCreate:function () {
            console.log("beforeCreate"+" "+this.msg)
        },
        //在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
        created:function () {
            console.log("created"+" " +this.msg)
        },
        //在挂载开始之前被调用：相关的 render 函数首次被调用。
        beforeMount:function () {

        },
        //el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
        mounted:function () {

        },
        //数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
        beforeUpdate:function () {

        },
        //由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
        updated:function () {
            
        },
        //keep-alive 组件激活时调用。
        activated:function () {

        },
        //keep-alive 组件停用时调用。
        deactivated:function () {

        },
        //实例销毁之前调用。在这一步，实例仍然完全可用。
        beforeDestroy:function () {

        },
        //Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
        destroyed:function () {

        },
        //当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
        errorCaptured:function () {

        },
    };

    new Vue({
        el:"#app",
        template:"<Test></Test>",
        components:{
            Test,
        }
    })

</script>

</body>
</html>

View Code

十三、$refs&nextTick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">

</div>

<script>

    var Test={
        template: `<div>
            <p ref="test" v-if="isShow">哈哈哈哈哈</p>
            <p>{{isShow}}</p>
            <button @click="isShowFunc">点我</button>
        </div>`,
        data:function(){
          return{
              isShow:false
          }
        },
        //el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
        mounted:function () {
            //this.$refs.test只有在mounted后才生效
            console.log(this);//显示this对像


        },
        methods:{
            isShowFunc:function (event) {
                //console.log("isShow执行了");
                this.isShow = !this.isShow;
                this.$nextTick(function () {
                    console.log(this.$refs.test.innerText)
                });
            }
        }
    };

    new Vue({
        el:"#app",
        template:"<Test></Test>",
        components:{
            Test,
        }
    })

</script>

</body>
</html>

View Code

十四、vue-router基本用法

示例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

<script>

    // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

    // 1. 定义 (路由) 组件。
    // 可以从其他文件 import 进来
    const Foo = { template: '<div>foo</div>' };
    const Bar = { template: '<div>bar</div>' };

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ];

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes // (缩写) 相当于 routes: routes
    });

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')

    // 现在，应用已经启动了！
    </script>


</body>
</html>

View Code

示例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>

<div id="app">

</div>

<script>

    Vue.use(VueRouter);

    var Login={
        template:`<div>登录页面</div>`
    };

    var Register={
        template: `<div>注册页面</div>`
    };

    var router=new VueRouter({
        routes: [
            {
                path:'/login',
                name:"login",
                component:Login
            },
            {
                path:'/register',
                name:"register",
                component:Register
            }
        ]
    });

    var App={
        template:`
            <div>
                <h1>Hello App!</h1>
                <p>
                    <router-link to="/login">登录</router-link>
                    <router-link to="/register">注册</router-link>
                    <router-link :to="{name:'login'}">登录</router-link>
                    <router-link :to="{name:'register'}">注册</router-link>
                </p>

                <router-view></router-view>
            </div>
        `
    };

    new Vue({
        el:"#app",
        components:{
          App
        },
        router,
        template:"<App />",
    })



</script>


</body>
</html>

View Code

十五、params与query参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>

<div id="app">

</div>

<script>

    Vue.use(VueRouter);

    var UseParams={
        template:`<div>我是用户1</div>`,
        created(){
            console.log(this.$route);
            console.log(this.$router);
            console.log(this.$route.params.userId);
        }
    };

    var UseQuery={
        template: `<div>我是用户2</div>`,
        created(){
            console.log(this.$route);
            console.log(this.$router);
            console.log(this.$route.query.userId);
        }
    };

    var router=new VueRouter({
        routes: [
            {
                path:'/user/:userId',
                name:"usep",
                component:UseParams
            },
            {
                path:'/user',
                name:"useq",
                component:UseQuery
            }
        ]
    });

    var App={
        template:`
            <div>
                <h1>Hello App!</h1>
                <p>
                    <router-link :to="{name:'usep',params:{userId:1}}">用户1</router-link>
                    <router-link :to="{name:'useq',query:{userId:2}}">用户2</router-link>
                </p>

                <router-view></router-view>
            </div>
        `
    };

    new Vue({
        el:"#app",
        components:{
          App
        },
        router,
        template:"<App />",
    })



</script>


</body>
</html>

View Code

十六、编程式导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>

<div id="app">

</div>

<script>

    Vue.use(VueRouter);

    var UseParams={
        template:`<div>我是用户1</div>`,
        created(){
            console.log(this.$route);
            console.log(this.$router);
            console.log(this.$route.params.userId);
        }
    };

    var UseQuery={
        template: `<div>我是用户2</div>`,
        created(){
            console.log(this.$route);
            console.log(this.$router);
            console.log(this.$route.query.userId);
        }
    };

    var router=new VueRouter({
        routes: [
            {
                path:'/user/:userId',
                name:"usep",
                component:UseParams
            },
            {
                path:'/user',
                name:"useq",
                component:UseQuery
            }
        ]
    });

    var App={
        template:`
            <div>
                <h1>Hello App!</h1>
                <p>
                    <button @click="usepHandle">用户1</button>
                    <button @click="useqHandle">用户2</button>
                    <router-link :to="{name:'usep',params:{userId:1}}">用户1</router-link>
                    <router-link :to="{name:'useq',query:{userId:2}}">用户2</router-link>
                </p>

                <router-view></router-view>
            </div>
        `,
        methods:{
            usepHandle:function () {
                this.$router.push({name:'usep',params:{userId:123}})
            },
            useqHandle:function () {
                this.$router.push({name:'useq',query:{userId:123}})
            },
        }
    };

    new Vue({
        el:"#app",
        components:{
          App
        },
        router,
        template:"<App />",
    })



</script>


</body>
</html>

View Code

十七、㠌套路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>

<div id="app">

</div>

<script>

    Vue.use(VueRouter);

    var Home={
        template:`<div>
            <router-link to="/home/music">音乐</router-link>
            <router-link to="/home/movie">电影</router-link>
            <router-view></router-view>
        </div>`,
    };

    var Music={
        template:`<div>我是音乐</div>`
    };
    var Movie={
        template:`<div>我是电影</div>`
    };

    var router=new VueRouter({
        routes: [
            {
                path:'',
                //url为‘/’
                // component:Home,
                //url为‘/home’
                redirect:'/home'
            },
            {
                path:'/home',
                //有子路由的时候父路由不能有name,不然会有警告
                // name:"home",
                component:Home,
                children:[
                    {
                        path:'',
                        component:Music
                    },
                    {
                        path:'music',
                        name:"music",
                        component: Music
                    },
                    {
                        path:'movie',
                        name:"movie",
                        component: Movie
                    }
                ]
            }
        ]
    });

    var App={
        template:`
            <div>
                <router-link to="/home">首页</router-link>

                <router-view></router-view>
            </div>
        `
    };

    new Vue({
        el:"#app",
        components:{
          App
        },
        router,
        template:"<App />",
    })
    
</script>

</body>
</html>

View Code

十八、动态路由匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>

<div id="app">

</div>

<script>

    Vue.use(VueRouter);

    var Home={
        template:`<div>
            <router-link :to="{name:'comment',params:{title:'music'}}">音乐</router-link>
            <router-link :to="{name:'comment',params:{title:'movie'}}">电影</router-link>
            <router-view></router-view>
        </div>`,
    };

    var Comment={
        template:`<div>我是{{msg}}</div>`,
        data:function(){
          return {
              msg:'music'
          }
        },
        watch:{
            $route:function (to,from) {
                console.log(to);
                console.log(from);
                this.msg=to.params.title
            }
        }
    };

    var router=new VueRouter({
        routes: [
            {
                path:'',
                //url为‘/’
                // component:Home,
                //url为‘/home’
                redirect:'/home'
            },
            {
                path:'/home',
                //有子路由的时候父路由不能有name,不然会有警告
                // name:"home",
                component:Home,
                children:[
                    {
                        path:'',
                        component:Comment
                    },
                    {
                        path:'comment/:title',
                        name:"comment",
                        component: Comment
                    },
                ]
            }
        ]
    });

    var App={
        template:`
            <div>
                <router-link to="/home">首页</router-link>

                <router-view></router-view>
            </div>
        `
    };

    new Vue({
        el:"#app",
        components:{
          App
        },
        router,
        template:"<App />",
    })
    
</script>

</body>
</html>

View Code

十九、keep-alive在路由中的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>

<div id="app">

</div>

<script>

    Vue.use(VueRouter);

    var Music={
        template:`<div>
            音乐
        </div>`,
        created(){
            console.log("music created")
        },
        mounted(){
            console.log("music mounted")
        },
        destroyed(){
            console.log("music destroyed")
        }
    };
    var Movie={
        template:`<div @click="changeColor">
            电影
        </div>`,
        created(){
            console.log("movie created")
        },
        mounted(){
            console.log("movie mounted")
        },
        destroyed(){
            console.log("movie destroyed")
        },
        methods:{
            //字体变红
            changeColor(event){
                event.target.style.color='red'
            }
        }
    };


    var router=new VueRouter({
        routes: [
            {
                path:'/music',
                name:'music',
                component:Music
            },
            {
                path:'/movie',
                name:'movie',
                component:Movie

            }
        ]
    });

    //keep-alive可以保持组件，不反复创建和销毁，节省资源
    var App={
        template:`
            <div>
                <router-link :to="{name:'music'}">音乐</router-link>
                <router-link :to="{name:'movie'}">电影</router-link>
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>

            </div>
        `
    };

    new Vue({
        el:"#app",
        components:{
          App
        },
        router,
        template:"<App />",
    })
    
</script>

</body>
</html>

View Code

二十、权限控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>

<div id="app">

</div>

<script>

    Vue.use(VueRouter);

    var Home={
        template:`<div>
            首页
        </div>`,
    };
    var Login={
        template:`<div>
            <input type="text" v-model="name">
            <input type="password" v-model="pwd">
            <input type="button" value="登录" @click="loginHandler">
        </div>`,
        data:function(){
            return {
                name:'',
                pwd:''
            }
        },
        methods:{
            loginHandler(){
                console.log("点击了登录按钮");
                localStorage.setItem("user",{name:this.name,pwd:this.pwd});
                this.$router.push({name:'questionBank'})
            }
        }
    };
    var QuestionBank={
        template:`<div>
            题库
        </div>`,

    };
    var Logout={
        template:`<div>
            <a href="#" @click="clear">退出</a>
        </div>`,
        methods: {
            clear(){
                localStorage.clear("user")
            }
        }
    };

    var router=new VueRouter({
        routes: [
            {
                path:'/home',
                name:'home',
                component:Home
            },
            {
                path:'/questionBank',
                name:'questionBank',
                component:QuestionBank,
                meta:{
                    auth:true
                }

            },
            {
                path:'/login',
                name:'login',
                component:Login
            },
            {
                path:'/logout',
                name:'logout',
                component:Logout
            },
        ]
    });

    router.beforeEach(function (to,from,next) {
        console.log(to);
        console.log(from);
        console.log(localStorage.getItem("user"));
        if (to.meta.auth){
            if(localStorage.getItem("user")){
                next()
            }else{
                next({
                    path:'/login'
                })
            }

        }else{
            next()
        }
    });
    //keep-alive可以保持组件，不反复创建和销毁，节省资源
    var App={
        template:`
            <div>
                <router-link :to="{name:'home'}">首页</router-link>
                <router-link :to="{name:'questionBank'}">题库</router-link>
                <router-link :to="{name:'login'}">登录</router-link>
                <router-link :to="{name:'logout'}" >退出</router-link>
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>

            </div>
        `
    };

    new Vue({
        el:"#app",
        components:{
          App
        },
        router,
        template:"<App />",
    })
    
</script>

</body>
</html>

View Code