一 安装
1.下载依赖
npm
npm install vue-router@4
yarn
yarn add vue-router@4
2.在main.js中引入
import router from 'vue-router'
3.全局注册
Vue.use(router);
2.实际使用
视频
2.1项目结构
2.1.1view/model/new1.vue
<template>
<div>
new1页面
</div>
</template>
<script>
export default {
name:'new1',
data() {
return{
}
},
methods: {
}
}
</script>
<style>
</style>
2.1.2view/home/home.vue
<template>
<div>Home页面</div>
</template>
<script>
export default {
name:'home'
}
</script>
<style>
</style>
2.1.3路由配置文件 config/routerConfig.js
export const constantRouterMap=[
{
path: '/new',
name: 'new',
component:()=>import('@/view/model/new1')
},
{
path: '/home',
name: 'home',
component:()=>import('@/view/home/home')
}
]
2.1.4路由文件 router/router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../view/model/new1.vue'
import {constantRouterMap} from '../config/routerConfig.js'
Vue.use(VueRouter);
export default new VueRouter({
mode: 'history',
routes: constantRouterMap
});
2.1.5App.vue
<template>
<div id="app" >
<div style="display: flex; justify-content: space-around; ">
<router-link to="/new">New</router-link>
<router-link to="/home">Home</router-link>
</div>
<div style="border: red 1px solid; width: 100%; margin: 20px;"></div>
<router-view/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import new1 from './view/model/new1.vue'
export default {
name: 'app',
components: {
HelloWorld,
new1
}
}
</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>
2.1.6main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
3.路由跳转
路由跳转两种方式:
1. 声明式路由导航 <router-link>
2. 编程式路由导航 this.$router.push()
4.路由传参
1.使用 编程式
new1.vue 传递数据
home.vue 接收数据
效果