1、写出路由规则(index.js配置)
import Vue from 'vue'
import VueRouter from 'vue-router'
// import HomeView from '../views/HomeView.vue'
// import AboutView from '../views/AboutView.vue'
Vue.use(VueRouter)
const routes = [
{
path: "/",
name: "HomeView",
// component: HomeView
component: () => import('../views/HomeView.vue') //懒加载设置,需要这个组件时,才开始调用
},
{
path: "/aboutview",
name: "AboutView",
// component: AboutView
component: () => import('../views/AboutView.vue')
}
]
const router = new VueRouter({
mode: 'history',
// linkExactActiveClass
routes
})
export default router
2、引入挂载路由
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render:h=>h(App)
}).$mount("#app")
3、使用路由(App.vue所有组件的父组件) [声明式]
<template>
<div>
<router-link to="/">HOME</router-link> |
<router-link to="/aboutview">ABOUT</router-link>
<router-view></router-view>
//to 路径,与路由规则中声明路径一样
//tag <router-link></router-link>相当于a标签,可以使用tag更改默认标签,如tag="h2"
//target 跳转方式,如target="_blank",新页面跳转
//replace 不会向history添加新的历史记录,所以浏览器前进与后退按钮无用
</div>
</template>