Vue路由vue-router

vue-router

适用背景

使用示例

// 添加依赖
npm install --save vue-router

// 创建router.js文件
import Vue from 'vue' 
import VueRouter from 'vue-router'
// 自定义的两个组件
import Home from './components/Home.vue' 
import FAQ from './components/FAQ.vue'
const routes = [
      { path: "/", name: "home", component: Home },
      { path: "/faq", name: "faq", component: FAQ },
]
const router = new VueRouter({   routes, })
export defalut router

// 创建一个名为AppLayout.vue的组件
<template>
  <div class="app-layout">
    <header class="header">
      <div><img class="img" src="../assets/logo.svg" /></div>
      <div>My shirt shop</div>
    </header>
    <!-- 相当于<a/>标签-->
    <router-link :to="{ name:'home' }">Home</router-link>     
    <router-link :to="{ name:'faq' }">FAQ</router-link> 
    <!-- 菜单将放在这里 -->
    <router-view />
  </div>
</template>

// main.js中 将布局组件放到应用中
import router from './router'
import AppLayout from './components/AppLayout.vue'
new Vue({   
	el: '#app', 
	render: h => h(AppLayout)，
	router
})

the end