import About from '@/components/Home'
Vue.config.productionTip = false
Vue.use(Router)
const routes = [
{
path: '',
redirect: '/Home' -----------首页重新定向
},
{
path: '/Home',
component: Home
},
{
path: '/About',
component: About
}
]
new Vue({
el: '#app',
router: new Router({ routes,mode:'history'}),---------------这里的mode属性可以去掉url的#
components: { App },
template: '<App/>'
})
展示页面配合:
<template>
<div id="app">
APP.VUE页
<router-link to='/Home'>首页</router-link>
<router-link to='/About'>关于</router-link>
<router-view></router-view> -----------------这里是展示区域
</div>
</template>
按钮跳转:
<template>
<div id="app">
APP.VUE页
<router-link to="/Home">首页</router-link>
<router-link to="/About">关于</router-link>
<button @click="homeclick">首页按钮</button>
<button @click="aboutclick">关于按钮</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
methods: {
homeclick() {
this.$router.push('/Home');
console.log('homeclcik');
},
aboutclick() {
this.$router.push('/About');
console.log('Aboutclcik');
}
}
};
</script>