vue-router路由学习笔记

最新推荐文章于 2024-03-13 23:12:49 发布

原创最新推荐文章于 2024-03-13 23:12:49 发布 · 315 阅读

2 ·

CC 4.0 BY-SA版权

大前端知识专栏收录该内容

9 篇文章

订阅专栏

本文通过狂神的视频教程，详细介绍了如何使用vue-cli创建Vue项目，并一步步实现Vue Router的安装、组件创建、路由配置以及在main.js和App.vue中的应用，最终实现页面间的跳转功能。

vue-router路由

狂神视频教程
https://www.bilibili.com/video/BV18E411a7mC?p=15

第一步使用vue-cli搭建vue程序搭建一个vue-cli 脚手架完整包（步骤一样，本示例将名称调整为myvue02router ）
https://blog.youkuaiyun.com/wei198621/article/details/116431613

在这里插入图片描述

狂神步骤截图

在这里插入图片描述

示例步骤

执行 install vue-router

C:\workspace\workspace_front\vue\vue狂神\myvue02router>cnpm install vue-router --save-dev

在这里插入图片描述

step1 删除 component 目录下HelloWorld 相关内容删除

1.component 目录下HelloWorld.vue
2.删除app.vue 下关于HelloWorld.vue的引入

在这里插入图片描述

step2 component 目录下方自定义组件

在这里插入图片描述

step3 定义 main 及 content01

在这里插入图片描述

main.vue

<template>
    <h1>首页</h1>
</template>

<script>
    export default {
        name: "main"
    }
</script>

<style scoped>

</style>

content01.vue

<template>
  <h1> this is a content01 </h1>
</template>

<script>
    export default {
        name: "content01"
    }
</script>

<style scoped>

</style>

step4 编写 router/index.js 路由表文件

在这里插入图片描述

import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../components/main'
import Content01 from '../components/content01'
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default  new VueRouter({
  routes:[
    {
      path: '/content01',   //路由路径
      name: 'content01',
      component: Content01    //跳转的组件
      },
    {
      path: '/main',   //路由路径
      name: 'main',
      component: Main    //跳转的组件
    }
    ]
});

step5 main.js 中配置路由

在这里插入图片描述

import Vue from 'vue'
import App from './App'
//import VueRouter from 'vue-router'    //router/index.js   中有 import VueRouter from 'vue-router' ，所以此处注释
import router from './router'    //自动扫描文件夹下的路由配置,默认找router/index.js 文件

Vue.config.productionTip = false

//显示声明使用VueRouter
//Vue.use(VueRouter)    //router/index.js   中有 Vue.use(VueRouter); ，所以此处注释

new Vue({
  el: '#app',
  router,      //配置路由
  components: { App },
  template: '<App/>'
})

app.vue 中使用路由

在这里插入图片描述

<template>
  <div id="app">
    <h1>Gousheng study Kuangshen</h1>
    <router-link to="/main" >首页</router-link>
    <router-link to="/content01">内容页</router-link>
    <!--router-view  显示router 指向组件的真实内容-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  }
}
</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>