1.安装vue-router
npm install vue-router --save
2.创建router文件夹,并且创建index.js文件
3.在index.js中加入代码
import Vue from 'vue';
import Router from 'vue-router';
//用到那个组件就引入那个
import HelloWorld from '@/components/HelloWorld.vue'
import Hello from '@/components/Hello.vue'
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{path: '/', component:HelloWorld},
{path: '/Hello', component:Hello},
]
});
4.在main.js中调用
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
//调用router,挂载到app上
new Vue({
router,
render: h => h(App),
}).$mount('#app')
5.然后在App.vue中调用
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!-- <router-link to="/bar">Go to Bar</router-link> -->
<HelloWorld msg="Welcome to Your Vue.js App"/>
<!-- <Hello></Hello> -->
<router-link to="/Hello">a</router-link>
<router-view>
</router-view>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld,
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
hello.vue
<template>
<div class="appContent">app content</div>
</template>
<script>
export default {
name: 'Hello',
props: {
msg: String
}
}
</script>
<style>
</style>
总结:用vue-router和a标签的区别:
a标签是点击则刷新整个页面,vue-router则改变的是router-view标签里面的内容,而标签外的内容是保持不变的,也就是说,当你点击导航的时候,变化的是导航标签下面的内容