前端进阶_Vue 路由系统

Posted shijieli

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端进阶_Vue 路由系统相关的知识,希望对你有一定的参考价值。

 Vue 路由系统

 

 

 简单示例

main.js 

import Vue from ‘vue‘
import App from ‘./App.vue‘


//https://router.vuejs.org/zh/guide/#html 如有疑问。请看官方手册

// 1.引入 vue-router
import VurRouter from "vue-router"

//  3.定义(路由 )组件
import Vmain from "./components/Vmain"
import Vcourse from "./components/Vcourse"
import Vmark from "./components/Vmark"

// 2.声明使用 vue-router
Vue.use(VurRouter);

// 4.定义路由对象,每个路由对象映射一个组件
const routes = [
  {path:"/",component:Vmain},
  {path:"/course",component:Vcourse},
  {path:"/mark",component:Vmark}
];

// 5.将路由对象的集合加载在 VurRouter 中
const router = new VurRouter({
  mode:"history",
  routes
});


new Vue({
  el: ‘#app‘,
  // 6. 挂载在 Vue 中
  router, // 相当于 routes:routes 的简写
  render: h => h(App),

});

// 7. 现在可以启动你的应用了

 

APP.vue

<template>
  <div>
    <ul>
      <li>
        <router-link to="/">首页</router-link>
      </li>
      <li>
        <router-link to="/course">课程表</router-link>
      </li>
      <li>
        <router-link to="/mark">编辑器</router-link>
      </li>
    </ul>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    <!--路由 出口-->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: app,
    data() {
      return {}
    },
    methods: {},
    computed: {},
    components: {},
  }
</script>

<style>

</style>

 

 

 

总结

 

  准备:

    引入vue-router

    声明使用 

    定义组件

    映射组件URL

    加载在 vue-router

    挂载在 vue 上

  使用:

     router-link 标签 

     to 属性到 URL

     router-view 展现组件内容

 

以上是关于前端进阶_Vue 路由系统的主要内容,如果未能解决你的问题,请参考以下文章

python进阶——AI视觉实现口罩检测实时语音报警系统

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

简简单单的Vue3(插件开发,路由系统,状态管理)

打通前后端全栈开发node+vue进阶课程学习系统项目实战详细讲解:后台路由,导航,首页,退出登录