vue路由

安装路由

vue-router

安装路由（vue2）：cnpm install --save vue-router@3

components文件夹放置全局公共组件

pages或views文件夹下放置路由组件

配置路由

一般放在router文件夹中：router/index.vue

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

import Home from "@/pages/Home";
import Login from "@/pages/Login";

export default
    new VueRouter({
        routes: [
            {
                path: "/home",
                component: Home,
            },
            {
                path: "/login",
                component: Login,
            },
			
        ]
    });

注册路由

在main.js进行注册

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

import router from "@/router";

new Vue({
  render: h => h(App),
  // 注册路由
  router
}).$mount('#app')

声明式导航

router-link

实质就是a标签

<router-link to="/login"></router-link>

编程式导航

$router

<template>
	<div>
		<button @click="goHome"></button>
	</div>
</template>

<script>
export default {
	methods:{
		goHome() {
			// 向home页面跳转
			this.$router.push("/home");
		}
	}
</script>
<style scoped>
</style>

路由三种传参方式

export default {
	data() {
		return {
			keyword: ""
		}
	},
	methods: {
		goSearch() {
			// 字符串形式
			this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase());
			// 模板字符串
			this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`);
			// 对象形式
			this.$router.push{name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}};
		}
	}
}

路由元数据

meta属性可以定义判断路由的key和value,例如：v-show="$route.meta.show"

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

import Home from "@/pages/Home";
import Login from "@/pages/Login";

export default
    new VueRouter({
        routes: [
            {
                path: "/home",
                component: Home,
				meta: {
					show:true,
				}
            },
            {
                path: "/login",
                component: Login,
				show:false
            },
			
        ]
    });

<template>
  <div>
    <Header></Header>
    <router-view></router-view>
    <Footer v-show="$route.meta.show"></Footer>
  </div>
</template>

<script>
import Header from "./components/Header";
import Footer from "./components/Footer";

export default {
  name: 'App',
  components: {
    Header,
    Footer,
  }
}
</script>