router-link的replace属性（控制路由跳转时操作浏览器历史记录的模式）

<router-link>的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
3. 如何开启replace模式：<router-link replace .......>News</router-link>

main.js

//引入Vue

import Vue from 'vue'

//引入App

import App from './App.vue'

//引入VueRouter

import VueRouter from 'vue-router'

//引入路由器

import router from './router'

//关闭Vue的生产提示

Vue.config.productionTip = false

//应用插件

Vue.use(VueRouter)

//创建vm

new Vue({

    el:'#app',

    render: h => h(App),

    router:router

})

App.vue

<template>

  <div>

    <div class="row">

      <Banner/>

    </div>

    <div class="row">

      <div class="col-xs-2 col-xs-offset-2">

        <div class="list-group">

          <!-- 原始html中我们使用a标签实现页面的跳转 -->

          <!-- <a class="list-group-item active" href="./about.html">About</a> -->

          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

          <!-- Vue中借助router-link标签实现路由的切换 -->

       

  <router-link replace class="list-group-item" active-class="active" to="/about">About</router-link>

  <router-link replace class="list-group-item" active-class="active" to="/home">Home</router-link>

        </div>

      </div>

      <div class="col-xs-6">

        <div class="panel">

          <div class="panel-body">

            <!-- 指定组件的呈现位置 -->

            <router-view></router-view>

          </div>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

  import Banner from './components/Banner'

  export default {

    name:'App',

    components:{Banner}

  }

</script>

router\index.js

// 该文件专门用于创建整个应用的路由器

import VueRouter from 'vue-router'

//引入组件

import About from '../pages/About'

import Home from '../pages/Home'

import News from '../pages/News'

import Message from '../pages/Message'

import Detail from '../pages/Detail'

//创建并暴露一个路由器

export default new VueRouter({

    routes:[

        {

            name:'guanyu',

            path:'/about',

            component:About

        },

        {

            path:'/home',

            component:Home,

            children:[

                {

                    path:'news',

                    component:News,

                },

                {

                    path:'message',

                    component:Message,

                    children:[

                       

                        {

                            name:'xiangqing',

                            path:'detail',

                            component:Detail,

//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。

// props:{a:1,b:'hello'}

//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。

// props:true

//props的第三种写法，值为函数

                props($route){

                                 return {

                                            id:$route.query.id,

                                            title:$route.query.title,

                                            a:1,

                                            b:'hello'

                                         }

                                }

                    ]

                }

            ]

        }

    ]

})

pages\About.vue

<template>

    <h2>我是About的内容</h2>

</template>

<script>

    export default {

        name:'About',

        /* beforeDestroy() {

            console.log('About组件即将被销毁了')

        },*/

        /* mounted() {

            console.log('About组件挂载完毕了',this)

            window.aboutRoute = this.$route

            window.aboutRouter = this.$router

        },  */

    }

</script>

pages\Detail.vue

<template>

    <ul>

        <li>消息编号：{{id}}</li>

        <li>消息标题：{{title}}</li>

    </ul>

</template>

<script>

export default {

        name:'Detail',

        props:['id','title'],

        computed: {

            // id(){

            //  return this.$route.query.id

            // },

            // title(){

            //  return this.$route.query.title

            // },

        },

        mounted() {

            // console.log(this.$route)

        },

    }

</script>

pages\Home.vue

<template>

    <div>

        <h2>Home组件内容</h2>

        <div>

            <ul class="nav nav-tabs">

                <li>

                    <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>

                </li>

                <li>

                    <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>

                </li>

            </ul>

            <router-view></router-view>

        </div>

    </div>

</template>

<script>

    export default {

        name:'Home',

        /* beforeDestroy() {

            console.log('Home组件即将被销毁了')

        }, */

        /* mounted() {

            console.log('Home组件挂载完毕了',this)

            window.homeRoute = this.$route

            window.homeRouter = this.$router

        },  */

    }

</script>

pages\Message.vue

<template>

    <div>

        <ul>

            <li v-for="m in messageList" :key="m.id">

                <!-- 跳转路由并携带params参数，to的字符串写法 -->

                <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>   -->

                <!-- 跳转路由并携带params参数，to的对象写法 -->

                <router-link :to="{

                    name:'xiangqing',

                   params:{

                        id:m.id,

                        title:m.title

                    }

                }">

                    {{m.title}}

                </router-link>

           

            </li>

        </ul>

        <hr>

        <router-view></router-view>

    </div>

</template>

<script>

    export default {

        name:'Message',

        data() {

            return {

                messageList:[

                    {id:'001',title:'消息001'},

                    {id:'002',title:'消息002'},

                    {id:'003',title:'消息003'}

                ]

            }

        },

    }

</script>

pages\News.vue

<template>

    <ul>

        <li>news001</li>

        <li>news002</li>

        <li>news003</li>

    </ul>

</template>

<script>

    export default {

        name:'News'

    }

</script>