vue router

router

<router-link>的replace属性

1. 作用：
   控制路由跳转时操作浏览器历史记录的模式

2. 浏览器的历史记录有两种写入方式：
   分别为 push 和 replace ，push 是追加历史记录，replace是替换当前记录。路由跳转时候默认为push

3. 如何开启 replace 模式：

    <router-link replace ......>News</router-link>
   

编程式路由导航

1. 作用：不借助 <router-link>实现路由跳转，让跳转更加灵活

2. 具体编码：

    // $router 的两个API
    this.$router.push({
    	name:'xiangqing',
    	params:{
    		id:xxx,
    		title:xxx
    	}
    })
   
    this.$router.replace({
    	name:'xiangqing',
    	params:{
    		id:xxx,
    		title:xxx
    	}
    })
   

案例：

• main.js

import Vue from 'vue'
import App from './App.vue'

// 引入VueRouter
import VueRouter from 'vue-router'

// 引入路由器
import router from './router'
Vue.config.productionTip = false

// 应用插件
Vue.use(VueRouter)
new Vue({
    render: h => h(App),
    router: router
}).$mount('#app')

• App.vue

<template>
  <div>
    <div class="row">
      <Banner />
    </div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-2">
        <div class="list-group">
          <router-link
            to="./about"
            class="list-group-item"
            active-class="active"
            >About</router-link
          >
          <router-link to="./home" class="list-group-item" active-class="active"
            >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>

• components文件夹

  • Banner.vue

  <template>
  	<div>
  		<div class="col-xs-offset-2 col-xs-8">
    			<div class="page-header">
      			<h2>Vue Router Demo</h2>
      			<button @click="back">后退</button>
      			<button @click="forward">前进</button>
    			</div>
  		</div>
  	</div>
  </template>
  
  <script>
  	export default {
  		name: "Banner",
  		methods: {
  				back() {
    					this.$router.back();
  			    },
  				forward() {
    					this.$router.forward();
  				},
  		},
  	};
  </script>
  

• pages文件夹

  • About.vue

  <template>
  	<div>
  		<h2>我是About的内容</h2>
  	</div>
  </template>
  
  <script>
  export default {
  	name: "About",
  };
  </script>
  

  • Detail.vue

  <template>
  	<ul>
  		 <li>消息编号：{{ id }}</li>
  		<li>消息标题：{{ title }}</li>
  	</ul>
  </template>
  
  <script>
  export default {
  	name: "Detail",
  	props: ["id", "title"],
  };
  </script>
  

  • Home.vue

  <template>
  	  <div>
  		<h2>我是Home的内容</h2>
  		<div>
    			<h2>Home组件内容</h2>
    			<div>
      			<ul class="nav nav-tabs">
        				<li>
          				<router-link
            				to="/home/news"
           	 			class="list-group-item"
            				active-class="active"
          				>
            				News
          				</router-link>
        				</li>
        				<li>
          			<router-link
            			to="/home/message"
           	 		class="list-group-item"
            			active-class="active"
          			>
            			Message
          			</router-link>
        			</li>
      		</ul>
      		<router-view></router-view>
    		</div>
  	</div>
  </div>
  </template>
  
  <script>
  export default {
  	name: "Home",
  };
  </script>
  

  • Message.vue

	<template>
  	<div>
    	<ul>
      	<li v-for="m in MessageList" :key="m.id">
        <router-link
          :to="{
            name: 'xq',
            query: {
              id: m.id,
              title: m.title,
            },
          }"
          >{{ m.title }}</router-link
        >
        <button @click="pushShow(m)">push查看</button>
        <button @click="replaceShow(m)">replace查看</button>
      </li>
    </ul>
    <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" },
      ],
    };
  },
  methods: {
    pushShow(m) {
      this.$router.push({
        name: "xq",
        query: {
          id: m.id,
          title: m.title,
        },
      });
    },
    	replaceShow(m) {
      	this.$router.replace({
        	name: "xq",
        	query: {
          	id: m.id,
         	 title: m.title,
        	},
      	});
    	},
  	},
	};
	</script>

• News.vue

<template>
  <ul>
    <li>news001</li>
    <li>news002</li>
    <li>news003</li>
  </ul>
</template>

<script>
export default {
  name: "News",
};
</script>

• router文件夹
  • index.js

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

// 引入VueRouter
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: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News,
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xq',
                            path: 'detail/:id/:title',
                            component: Detail,
                            // props的第三种写法，值为函数
                            props($route) {
                                return {
                                    id: $route.query.id, title: $route.query.title
                                }
                            }
                        }

                    ]
                }
            ]
        },
    ]
})