Vue的学习（五）

85394591

2020-01-04

41、vue-router之路由参数的随意设置与伪静态链接地址处理：

访问路径：你的加上#/content/1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router之路由参数的随意设置与伪静态链接地址处理</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!--
        router-link: 定义路由的链接的标签
        to: 定义跳转到那个组件
        router-view：展示组件的标签
    -->
    <router-link to="/content">内容</router-link>
    <router-view></router-view>
</div>
<script type="text/x-template" id="content">
    <div>
        id:{{$route.params.id}}
        <br />
        <button @click="show">检测参数</button>
    </div>
</script>
</body>
<script>
    // 定义组件
    const content = {
        template: "#content",
        methods: {
            show() {
                /*this.$route.params)：获取路由传过来的变量（所有变量）*/
                console.log(this.$route.params);
                /*获取名为cid的变脸*/
                // console.log(this.$route.params.cid);
            }
        }
    };
    //定义路由器，然后把组件交给路由器
    let routes = [
            /*:cid :定义了一个名为cid的变量*/
            {path: ‘/content/:id‘, component: content}
        ];

    //routes:routes可以写成routes
    // let router = new VueRouter({routes:routes});
    let router = new VueRouter({routes});
    new Vue({
        el: ‘#app‘,
        //把路由器注入主组件中，这样才有效果
        /*
        * 注意：router 与 routes 的区别：
        * router 是一个机制，相当于一个管理者，它来管理路由。
        * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
        * route，它是一条路由。
        * */
        //如果 router的名称和router的一样可以直接写成 router 即可
        // router: router
        router
    })
</script>
</html>

42、vue-router之路由参数的验证处理保存路由安全：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router之路由参数的验证处理保存路由安全</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!--
        router-link: 定义路由的链接的标签
        to: 定义跳转到那个组件
        router-view：展示组件的标签
    -->
    <router-link to="/content">内容</router-link>
    <router-view></router-view>
</div>
<script type="text/x-template" id="content">
    <div>
        id:{{$route.params.id}}
        <br />
        <button @click="show">检测参数</button>
    </div>
</script>
</body>
<script>
    // 定义组件
    const content = {
        template: "#content",
        methods: {
            show() {
                /*this.$route.params)：获取路由传过来的变量（所有变量）*/
                console.log(this.$route.params);
                /*获取名为cid的变脸*/
                // console.log(this.$route.params.cid);
            }
        }
    };
    //定义路由器，然后把组件交给路由器
    let routes = [
            /*:id :定义了一个名为id的变量*/
            /*:id(a\d{2}) :表示必须以a开头包含两位数字，比如：a23 */
            {path: ‘/content/:id(a\\d{2})‘, component: content}
        ];

    //routes:routes可以写成routes
    // let router = new VueRouter({routes:routes});
    let router = new VueRouter({routes});
    new Vue({
        el: ‘#app‘,
        //把路由器注入主组件中，这样才有效果
        /*
        * 注意：router 与 routes 的区别：
        * router 是一个机制，相当于一个管理者，它来管理路由。
        * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
        * route，它是一条路由。
        * */
        //如果 router的名称和router的一样可以直接写成 router 即可
        // router: router
        router
    })
</script>
</html>

43、vue-router之路由参数默认值的设置技巧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router之路由参数默认值的设置技巧</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!--
        router-link: 定义路由的链接的标签
        to: 定义跳转到那个组件
        router-view：展示组件的标签
    -->
    <router-link to="/content">内容</router-link>
    <router-view></router-view>
</div>
<script type="text/x-template" id="content">
    <div>
        id:{{id}}
        <br />
        <button @click="show">检测参数</button>
    </div>
</script>
</body>
<script>
    // 定义组件
    const content = {
        template: "#content",
        /*子组件的data是一个匿名函数*/
        data() {
            return {
                id: 0
            }
        },
        /*
        * mounted钩子函数的调用时机：
        * 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会
        * 做一些ajax请求获取数据来进行数据初始化
        * 注意：mounted在整个实例中只执行一次
        * */
        mounted() {
            this.id = this.$route.params.id;
            if (!this.id) {
                this.id = 1;
            }
        },
        methods: {
            show() {
                /*this.$route.params)：获取路由传过来的变量（所有变量）*/
                console.log(this.$route.params);
                /*获取名为cid的变脸*/
                // console.log(this.$route.params.cid);
            }
        }
    };
    //定义路由器，然后把组件交给路由器
    let routes = [
            /*:id :定义了一个名为id的变量*/
            /*? :表示匹配一个整数或者0个*/
            {path: ‘/content/:id?‘, component: content}
        ];

    //routes:routes可以写成routes
    // let router = new VueRouter({routes:routes});
    let router = new VueRouter({routes});
    new Vue({
        el: ‘#app‘,
        //把路由器注入主组件中，这样才有效果
        /*
        * 注意：router 与 routes 的区别：
        * router 是一个机制，相当于一个管理者，它来管理路由。
        * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
        * route，它是一条路由。
        * */
        //如果 router的名称和router的一样可以直接写成 router 即可
        // router: router
        router
    })
</script>
</html>

44、vue-router之实例操作新闻列表单页面应用与路由别名：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router之实例操作新闻列表单页面应用与路由别名</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
<script type="text/x-template" id="home">
    <div>
        <li v-for="v in news">
            <!--只要要绑定变量，都可用v-bind: 简写 ：-->
            <!--
                name:‘content‘:指定名为 content的路由，即‘/content/:id‘
                params:{id:v.id}}:作用是赋值给路由中的 :id 变量
            -->
            <router-link :to="{name:‘content‘,params:{id:v.id}}">{{v.title}}</router-link>
        </li>
    </div>
</script>
<script type="text/x-template" id="content">
    <div>
        <li>{{field.title}} - {{field.id}}</li>
        <p>
            {{field.content}}
        </p>
        <!--
        router-link: 定义路由的链接的标签
        to: 定义跳转到那个组件
        router-view：展示组件的标签
        -->
        <router-link to="/">返回首页</router-link>
    </div>
</script>
</body>
<script>
    const data = [
        {id:1,title:‘PHP开源免费框架‘,content:‘这是PHP的内容...‘},
        {id:2,title:‘CMS开源免费框架‘,content:‘这是CMS的内容...‘}
    ];
    // 定义组件
    const home = {
        template: "#home",
        /*子组件的data是一个匿名函数*/
        data() {
            return {
                news: data
            }
        }
    };
    const content = {
        template: "#content",
        /*子组件的data是一个匿名函数*/
        data() {
            return {
                field:{}
            }
        },
        /*
        * mounted钩子函数的调用时机：
        * 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会
        * 做一些ajax请求获取数据来进行数据初始化
        * 注意：mounted在整个实例中只执行一次
        * */
        mounted() {
            let id = this.$route.params.id;
            for (let k=0;k<data.length;k++) {
                if (data[k].id===id) {
                    this.field = data[k];
                }
            }
        }
    };
    //定义路由器，然后把组件交给路由器
    let routes = [
            /*:id :定义了一个名为id的变量*/
            /*路由带有变量的时候给路由一个名称，便于后面的调用*/
            {path: ‘/content/:id‘, component: content,name:‘content‘},
            {path: ‘/‘, component: home}
        ];

    //routes:routes可以写成routes
    // let router = new VueRouter({routes:routes});
    let router = new VueRouter({routes});
    new Vue({
        el: ‘#app‘,
        //把路由器注入主组件中，这样才有效果
        /*
        * 注意：router 与 routes 的区别：
        * router 是一个机制，相当于一个管理者，它来管理路由。
        * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
        * route，它是一条路由。
        * */
        //如果 router的名称和router的一样可以直接写成 router 即可
        // router: router
        router
    })
</script>
</html>

45、vue-router之路由嵌套在文章系统中的使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router之路由嵌套在文章系统中的使用方法</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
<script type="text/x-template" id="home">
    <div>
        <li v-for="v in news">
            <!--只要要绑定变量，都可用v-bind: 简写 ：-->
            <!--
                name:‘content‘:指定名为 content的路由，即‘/content/:id‘
                params:{id:v.id}}:作用是赋值给路由中的 :id 变量
            -->
            <router-link :to="{name:‘content‘,params:{id:v.id}}">{{v.title}}</router-link>
        </li>
        <!--展示其子路由的页面-->
        <router-view></router-view>
    </div>
</script>
<script type="text/x-template" id="content">
    <div>
        <li>{{field.title}} - {{field.id}}</li>
        <p>
            {{field.content}}
        </p>
        <!--
        router-link: 定义路由的链接的标签
        to: 定义跳转到那个组件
        router-view：展示组件的标签
        -->
        <router-link to="/">返回首页</router-link>
    </div>
</script>
</body>
<script>
    const data = [
        {id:1,title:‘PHP开源免费框架‘,content:‘这是PHP的内容...‘},
        {id:2,title:‘CMS开源免费框架‘,content:‘这是CMS的内容...‘}
    ];
    // 定义组件
    const home = {
        template: "#home",
        /*子组件的data是一个匿名函数*/
        data() {
            return {
                news: data
            }
        }
    };
    const content = {
        template: "#content",
        /*子组件的data是一个匿名函数*/
        data() {
            return {
                field:{}
            }
        },
        /*
        * mounted钩子函数的调用时机：
        * 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会
        * 做一些ajax请求获取数据来进行数据初始化
        * 注意：mounted在整个实例中只执行一次
        * */
        mounted() {
            let id = this.$route.params.id;
            for (let k=0;k<data.length;k++) {
                if (data[k].id===id) {
                    this.field = data[k];
                }
            }
        }
    };
    //定义路由器，然后把组件交给路由器
    let routes = [
            /*:id :定义了一个名为id的变量*/
            /*路由带有变量的时候给路由一个名称，便于后面的调用*/
            /*children:定义home的子路由*/
            {path: ‘/‘, component: home,children:[
                    {path: ‘/content/:id‘, component: content,name:‘content‘}
                ]}
        ];

    //routes:routes可以写成routes
    // let router = new VueRouter({routes:routes});
    let router = new VueRouter({routes});
    new Vue({
        el: ‘#app‘,
        //把路由器注入主组件中，这样才有效果
        /*
        * 注意：router 与 routes 的区别：
        * router 是一个机制，相当于一个管理者，它来管理路由。
        * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
        * route，它是一条路由。
        * */
        //如果 router的名称和router的一样可以直接写成 router 即可
        // router: router
        router
    })
</script>
</html>

46、vue-router之使用watch与mounted解决同一组件页面不刷新数据的问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router之使用watch与mounted解决同一组件页面不刷新数据的问题</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
<script type="text/x-template" id="home">
    <div>
        <li v-for="v in news">
            <!--只要要绑定变量，都可用v-bind: 简写 ：-->
            <!--
                name:‘content‘:指定名为 content的路由，即‘/content/:id‘
                params:{id:v.id}}:作用是赋值给路由中的 :id 变量
            -->
            <router-link :to="{name:‘content‘,params:{id:v.id}}">{{v.title}}</router-link>
        </li>
        <!--展示其子路由的页面-->
        <router-view></router-view>
    </div>
</script>
<script type="text/x-template" id="content">
    <div>
        <li>{{field.title}} - {{field.id}}</li>
        <p>
            {{field.content}}
        </p>
        <!--
        router-link: 定义路由的链接的标签
        to: 定义跳转到那个组件
        router-view：展示组件的标签
        -->
        <router-link to="/">返回首页</router-link>
    </div>
</script>
</body>
<script>
    const data = [
        {id:1,title:‘PHP开源免费框架‘,content:‘这是PHP的内容...‘},
        {id:2,title:‘CMS开源免费框架‘,content:‘这是CMS的内容...‘}
    ];
    // 定义组件
    const home = {
        template: "#home",
        /*子组件的data是一个匿名函数*/
        data() {
            return {
                news: data
            }
        }
    };
    const content = {
        template: "#content",
        /*子组件的data是一个匿名函数*/
        data() {
            return {
                field:{}
            }
        },
        /*
        * 用 watch 来监听路由，只要路由发生改变就重新加载 content 组件的内容
        * */
        watch: {
          ‘$route‘(to,from) {
              this.load();
          }
        },
        /*
        * mounted钩子函数的调用时机：
        * 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会
        * 做一些ajax请求获取数据来进行数据初始化
        * 注意：mounted在整个实例中只执行一次
        * */
        /*
        * mounted的内容只在组件加载完的时候执行一次，也就是同一个组件只执行一次，不管页面后面的数据改不改变
        * */
        mounted() {
            this.load();
        },
        methods: {
            load() {
                let id = this.$route.params.id;
                for (let k=0;k<data.length;k++) {
                    if (data[k].id===id) {
                        this.field = data[k];
                    }
                }
            }
        }
    };
    //定义路由器，然后把组件交给路由器
    let routes = [
            /*:id :定义了一个名为id的变量*/
            /*路由带有变量的时候给路由一个名称，便于后面的调用*/
            /*children:定义home的子路由*/
            {path: ‘/‘, component: home,children:[
                    {path: ‘/content/:id‘, component: content,name:‘content‘}
                ]}
        ];

    //routes:routes可以写成routes
    // let router = new VueRouter({routes:routes});
    let router = new VueRouter({routes});
    new Vue({
        el: ‘#app‘,
        //把路由器注入主组件中，这样才有效果
        /*
        * 注意：router 与 routes 的区别：
        * router 是一个机制，相当于一个管理者，它来管理路由。
        * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
        * route，它是一条路由。
        * */
        //如果 router的名称和router的一样可以直接写成 router 即可
        // router: router
        router
    })
</script>
</html>

47、vue-router之通过程序控制路由的跳转：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router之通过程序控制路由的跳转</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
<script type="text/x-template" id="home">
    <div>
        <li v-for="v in news">
            <!--只要要绑定变量，都可用v-bind: 简写 ：-->
            <!--
                .prevent: 阻止 a 标签的默认跳转行为
            -->
            <a href="" @click.prevent="go(v.id)">{{v.title}}</a>
        </li>
    </div>
</script>
<script type="text/x-template" id="content">
    <div>
        <li>{{field.title}} - {{field.id}}</li>
        <p>
            {{field.content}}
        </p>
        <a href="" @click.prevent="back()">返回</a>
    </div>
</script>
</body>
<script>
    const data = [
        {id: 1, title: ‘PHP开源免费框架‘, content: ‘这是PHP的内容...‘},
        {id: 2, title: ‘CMS开源免费框架‘, content: ‘这是CMS的内容...‘}
    ];
    // 定义组件
    const home = {
        template: "#home",
        /*子组件的data是一个匿名函数*/
        data() {
            return {
                news: data
            }
        },
        methods: {
            go(id) {
                //第一种传路径的方式
                //const url = "/content/" + id;
                //第二种传路径的方式
                // const  url = {path:‘/content/‘+id};
                //第三种传路径的方式
                const url = {name:‘content‘,params:{id:id}};
                /*
                * $route：获取参数用的
                * $router：设置路由用的
                * */
                //push会保存历史记录
                this.$router.push(url);
                //replace会替换掉当前的路径
                // this.$router.replace(url);
            }
        }
    };
    const content = {
        template: "#content",
        /*子组件的data是一个匿名函数*/
        data() {
            return {
                field: {}
            }
        },
        /*
        * 用 watch 来监听路由，只要路由发生改变就重新加载 content 组件的内容
        * */
        watch: {
            ‘$route‘(to, from) {
                this.load();
            }
        },
        /*
        * mounted钩子函数的调用时机：
        * 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会
        * 做一些ajax请求获取数据来进行数据初始化
        * 注意：mounted在整个实例中只执行一次
        * */
        /*
        * mounted的内容只在组件加载完的时候执行一次，也就是同一个组件只执行一次，不管页面后面的数据改不改变
        * */
        mounted() {
            this.load();
        },
        methods: {
            load() {
                let id = this.$route.params.id;
                for (let k = 0; k < data.length; k++) {
                    if (data[k].id == id) {
                        this.field = data[k];
                    }
                }
            },
            back() {
                /*
                * 如果这里使用了this.$router.go(-1)，则上面的路由跳转
                * 就不能使用this.$router.replace(url)，因为这个是替换掉路径的，没有历史记录
                * */
                /*go(-1): 返回上一页去*/
                this.$router.go(-1);
            }
        }
    };
    //定义路由器，然后把组件交给路由器
    let routes = [
        /*:id :定义了一个名为id的变量*/
        /*路由带有变量的时候给路由一个名称，便于后面的调用*/
        {path: ‘/‘, component: home},
        {path: ‘/content/:id‘, component: content, name: ‘content‘}
    ];

    //routes:routes可以写成routes
    // let router = new VueRouter({routes:routes});
    let router = new VueRouter({routes});
    new Vue({
        el: ‘#app‘,
        //把路由器注入主组件中，这样才有效果
        /*
        * 注意：router 与 routes 的区别：
        * router 是一个机制，相当于一个管理者，它来管理路由。
        * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
        * route，它是一条路由。
        * */
        //如果 router的名称和router的一样可以直接写成 router 即可
        // router: router
        router
    })
</script>
</html>

48、vue-router之命名视图的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router之命名视图的实例</title>
    <style>
        .menu {
            border: solid 2px red;
            background: aqua;
            padding: 100px;
            display: block;
        }
        .news {
            border: solid 2px green;
            background: orange;
            padding: 50px;
            float: left;
            width: 36.3%;
        }
        .slide {
            border: solid 2px gold;
            background: blueviolet;
            padding: 50px;
            float: right;
            width: 50%;
        }
    </style>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-view></router-view>
    <router-view name="news"></router-view>
    <router-view name="slide"></router-view>
</div>
<script type="text/x-template" id="menu">
    <div class="menu">
        <a href="http://www.baidu.com">百度</a>
        <a href="https://www.cnblogs.com/chenjianbo/p/9866312.html">Mounted函数</a>
    </div>
</script>
<script type="text/x-template" id="news">
    <div class="news">
        <li v-for="v in news">{{v.title}}</li>
    </div>
</script>
<script type="text/x-template" id="slide">
    <div class="slide">
        <li v-for="v in data">{{v.title}}</li>
    </div>
</script>
</body>
<script>
    // 定义组件
    const menu = {
        template: "#menu"
    };
    const news = {
        template: "#news",
        data() {
            return {
                news: [
                    {title:‘数学分析‘},
                    {title:‘高等代数‘},
                    {title:‘数据模型‘}
                ]
            }
        }
    };
    const slide = {
        template: "#slide",
        data() {
            return {
                data: [
                    {title: ‘今日新闻‘},
                    {title: ‘最新新闻‘},
                    {title: ‘昨日新闻‘}
                ]
            }
        }
    };
    //定义路由器，然后把组件交给路由器
    let routes = [
        {
            /*
            * 在根路径下定义子组件使用 components 定义多个
            * */
            path:‘/‘,components: {
                default: menu,
                news: news,
                slide: slide
            }
        }
    ];

    //routes:routes可以写成routes
    // let router = new VueRouter({routes:routes});
    let router = new VueRouter({routes});
    new Vue({
        el: ‘#app‘,
        //把路由器注入主组件中，这样才有效果
        /*
        * 注意：router 与 routes 的区别：
        * router 是一个机制，相当于一个管理者，它来管理路由。
        * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
        * route，它是一条路由。
        * */
        //如果 router的名称和router的一样可以直接写成 router 即可
        // router: router
        router
    })
</script>
</html>

49、vue-router之重定向redirect的使用技巧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router之重定向redirect的使用技巧</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <a href="http://www.baidu.com">百度</a>
    <router-link to="/about">关于我们</router-link>
    <router-view></router-view>
</div>
<script type="text/x-template" id="home">
    <div>
        <li v-for="v in news">
            <!--只要要绑定变量，都可用v-bind: 简写 ：-->
            <!--
                .prevent: 阻止 a 标签的默认跳转行为
            -->
            <a href="" @click.prevent="go(v.id)">{{v.title}}</a>
        </li>
    </div>
</script>
<script type="text/x-template" id="content">
    <div>
        <li>{{field.title}} - {{field.id}}</li>
        <p>
            {{field.content}}
        </p>
        <a href="" @click.prevent="back()">返回</a>
    </div>
</script>
</body>
<script>
    const data = [
        {id: 1, title: ‘PHP开源免费框架‘, content: ‘这是PHP的内容...‘},
        {id: 2, title: ‘CMS开源免费框架‘, content: ‘这是CMS的内容...‘},
        {id: 3, title: ‘关于我们‘, content: ‘一个还不知道未来会发生什么的少年，在拼命的学习中....‘}
    ];
    // 定义组件
    const home = {
        template: "#home",
        /*子组件的data是一个匿名函数*/
        data() {
            return {
                news: data
            }
        },
        methods: {
            go(id) {
                //第一种传路径的方式
                //const url = "/content/" + id;
                //第二种传路径的方式
                // const  url = {path:‘/content/‘+id};
                //第三种传路径的方式
                const url = {name:‘content‘,params:{id:id}};
                /*
                * $route：获取参数用的
                * $router：设置路由用的
                * */
                //push会保存历史记录
                this.$router.push(url);
                //replace会替换掉当前的路径
                // this.$router.replace(url);
            }
        }
    };
    const content = {
        template: "#content",
        /*子组件的data是一个匿名函数*/
        data() {
            return {
                field: {}
            }
        },
        /*
        * 用 watch 来监听路由，只要路由发生改变就重新加载 content 组件的内容
        * */
        watch: {
            ‘$route‘(to, from) {
                this.load();
            }
        },
        /*
        * mounted钩子函数的调用时机：
        * 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会
        * 做一些ajax请求获取数据来进行数据初始化
        * 注意：mounted在整个实例中只执行一次
        * */
        /*
        * mounted的内容只在组件加载完的时候执行一次，也就是同一个组件只执行一次，不管页面后面的数据改不改变
        * */
        mounted() {
            this.load();
        },
        methods: {
            load() {
                let id = this.$route.params.id;
                for (let k = 0; k < data.length; k++) {
                    if (data[k].id == id) {
                        this.field = data[k];
                    }
                }
            },
            back() {
                /*
                * 如果这里使用了this.$router.go(-1)，则上面的路由跳转
                * 就不能使用this.$router.replace(url)，因为这个是替换掉路径的，没有历史记录
                * */
                /*go(-1): 返回上一页去*/
                this.$router.go(-1);
            }
        }
    };
    //定义路由器，然后把组件交给路由器
    let routes = [
        /*:id :定义了一个名为id的变量*/
        /*路由带有变量的时候给路由一个名称，便于后面的调用*/
        {path: ‘/‘, component: home},
        {path: ‘/content/:id‘, component: content, name: ‘content‘},
        {path: ‘/about‘, redirect:{name:‘content‘,params:{id:3}}}
    ];

    //routes:routes可以写成routes
    // let router = new VueRouter({routes:routes});
    let router = new VueRouter({routes});
    new Vue({
        el: ‘#app‘,
        //把路由器注入主组件中，这样才有效果
        /*
        * 注意：router 与 routes 的区别：
        * router 是一个机制，相当于一个管理者，它来管理路由。
        * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
        * route，它是一条路由。
        * */
        //如果 router的名称和router的一样可以直接写成 router 即可
        // router: router
        router
    })
</script>
</html>

50、vue-router之使用路由别名定制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router之使用路由别名定制</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <a href="http://www.baidu.com">百度</a>
    <router-link to="/about">关于我们</router-link>
    <router-view></router-view>
</div>
<script type="text/x-template" id="home">
    <div>
        <li v-for="v in news">
            <!--只要要绑定变量，都可用v-bind: 简写 ：-->
            <!--
                .prevent: 阻止 a 标签的默认跳转行为
            -->
            <a href="" @click.prevent="go(v.id)">{{v.title}}</a>
        </li>
    </div>
</script>
<script type="text/x-template" id="content">
    <div>
        <li>{{field.title}} - {{field.id}}</li>
        <p>
            {{field.content}}
        </p>
        <a href="" @click.prevent="back()">返回</a>
    </div>
</script>
</body>
<script>
    const data = [
        {id: 1, title: ‘PHP开源免费框架‘, content: ‘这是PHP的内容...‘},
        {id: 2, title: ‘CMS开源免费框架‘, content: ‘这是CMS的内容...‘},
        {id: 3, title: ‘关于我们‘, content: ‘一个还不知道未来会发生什么的少年，在拼命的学习中....‘}
    ];
    // 定义组件
    const home = {
        template: "#home",
        /*子组件的data是一个匿名函数*/
        data() {
            return {
                news: data
            }
        },
        methods: {
            go(id) {
                //第一种传路径的方式
                //const url = "/content/" + id;
                //第二种传路径的方式
                // const  url = {path:‘/content/‘+id};
                //第三种传路径的方式
                const url = {name:‘content‘,params:{id:id}};
                /*
                * $route：获取参数用的
                * $router：设置路由用的
                * */
                //push会保存历史记录
                this.$router.push(url);
                //replace会替换掉当前的路径
                // this.$router.replace(url);
            }
        }
    };
    const content = {
        template: "#content",
        /*子组件的data是一个匿名函数*/
        data() {
            return {
                field: {}
            }
        },
        /*
        * 用 watch 来监听路由，只要路由发生改变就重新加载 content 组件的内容
        * */
        watch: {
            ‘$route‘(to, from) {
                this.load();
            }
        },
        /*
        * mounted钩子函数的调用时机：
        * 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会
        * 做一些ajax请求获取数据来进行数据初始化
        * 注意：mounted在整个实例中只执行一次
        * */
        /*
        * mounted的内容只在组件加载完的时候执行一次，也就是同一个组件只执行一次，不管页面后面的数据改不改变
        * */
        mounted() {
            this.load();
        },
        methods: {
            load() {
                let id = this.$route.params.id;
                for (let k = 0; k < data.length; k++) {
                    if (data[k].id == id) {
                        this.field = data[k];
                    }
                }
            },
            back() {
                /*
                * 如果这里使用了this.$router.go(-1)，则上面的路由跳转
                * 就不能使用this.$router.replace(url)，因为这个是替换掉路径的，没有历史记录
                * */
                /*go(-1): 返回上一页去*/
                this.$router.go(-1);
            }
        }
    };
    //定义路由器，然后把组件交给路由器
    let routes = [
        /*:id :定义了一个名为id的变量*/
        /*路由带有变量的时候给路由一个名称，便于后面的调用*/
        {path: ‘/‘, component: home},
        {path: ‘/content/:id‘, component: content, name: ‘content‘},
        /*alias: 定义路由的别名，是一个数组，所以可以定义多个别名*/
        {path: ‘/content/3‘, alias:[‘/about‘]}
    ];

    //routes:routes可以写成routes
    // let router = new VueRouter({routes:routes});
    let router = new VueRouter({routes});
    new Vue({
        el: ‘#app‘,
        //把路由器注入主组件中，这样才有效果
        /*
        * 注意：router 与 routes 的区别：
        * router 是一个机制，相当于一个管理者，它来管理路由。
        * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
        * route，它是一条路由。
        * */
        //如果 router的名称和router的一样可以直接写成 router 即可
        // router: router
        router
    })
</script>
</html>

vue content