https://v3.router.vuejs.org/zh/guide/
一个简单例子
先用脚手架创建一个原始项目,然后cd到项目根目录下
①npm install vue-router@3(对应Vue2)
②准备几个简单的组件备用(这种组件叫做路由组件,可以进一步和一般组件区分一下)
Page1.vue:
<template> <div> <h1>这是页面1</h1> <p>路径参数测试</p> <p>该组件是否会重复创建?</p> <p>name:{{$route.params.name}}</p> </div> </template> <script> export default { name: 'Page1', beforeCreate() { console.log('beforeCreate被调用') }, created() { console.log('created被调用') }, mounted() { console.log('mounted被调用') console.log(this.$route) }, } </script>
③写配置
./router/index.js:
import Vue from 'vue' import VueRouter from 'vue-router' import Page1 from '../components/Page1.vue' import Page2 from '../components/Page2.vue' import Page3 from '../components/Page3.vue' Vue.use(VueRouter) export default new VueRouter({ routes: [ { path: '/p1', component: Page1, }, { path: '/p2', component: Page2, }, { path: '/p3', component: Page3, }, ], })
④启用配置
main.js:
import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ render: h => h(App), router, }).$mount('#app')
⑤应用到页面
<template> <div> <router-link to="/p1">Go to P1</router-link> <router-link to="/p2">Go to P2</router-link> <router-link to="/p3">Go to P3</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'App', } </script> <style> a { margin: 10px; background-color: aquamarine; } </style>