Vue路由(router)的安装和使用
安装vue-router插件
第一步:在CMD窗口中,使用命令跳转到vue的安装路径下
第二步:输入命令:npm i vue-router@3
vue2 要安装 vue-router3
npm i vue-router@3
vu3 要安装 vue-router4
npm i vue-router@4
第三步:出现added 1 package in 2m表示安装成功
vue-router配置环境
第一步:在main.js文件中导入vue-router命令:import VueRouter from 'vue-router'
第二步:使用命令Vue.use(VueRouter)
第三步:添加配置项,添加新的文件夹router,在router文件夹中添加index.js文件,并导入在main.js文件中:import router from './router/index'
注意:router文件夹中的index.js文件在导入时,可以省略不写index:import router from './router'
如何使用路由
单级路由
在router文件夹中添加index.js文件,输入命令(使用路由需要先导入组件)
注意:导入路由的组件,最好和普通组件有所区分,建议创建一个pages文件夹用来存放路由组件
//index.js import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [{ path: '/Index', name: 'Index', component: () => import('../pages/home/index'), }, { path: '/homeB', name: 'homeB', component: () => import('../pages/home/B'), }, ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } }) export default router;
//app.vue <template> <div class="hello"> <div class="btn"> <router-link to="/Index">Index</router-link> </div> <div class="btn"> <router-link to="/homeB">home B</router-link> </div> <router-view></router-view> </div> </template> <script> export default { name: 'HelloWorld', props: { msg: String } } </script>
// index.vue,homeB.vue内容简单修改即可 <template> <div> <h2>A</h2> <ul> <li>Index</li> <li>home B</li> </ul> </div> </template> <script> export default { name : 'Index' } </script>
<router-link to=""></router-link>与<a href=""></a>
在vue文件中,router-link 标签是用来代替 a 标签的
router-link 标签最终编译之后的还是 a 标签。vue-router 库帮助我们完成的
<router-view></router-view>:路由组件显示的位置,router-view 标签只是一个占位符
注意:路由组件在进行切换的时候,被切换的组件会被销毁。
标签:index,vue,js,import,引入,router,路由 From: https://www.cnblogs.com/czhowe/p/18111255