vue-router路由 学习笔记

vue-router路由

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

第一步 使用vue-cli搭建vue程序 搭建一个vue-cli 脚手架完整包 （步骤一样，本示例将 名称调整为myvue02router ）
https://blog.csdn.net/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.vue 中使用路由

<template>
  <div id="app">
    <h1>Gousheng study Kuangshenh1>
    <router-link to="/main" >首页router-link>
    <router-link to="/content01">内容页router-link>
    
    <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>

效果