vue路由router-view用法

落日映苍穹つ 2022-05-15 12:22 602阅读 0赞

此文件位置：myproject/src/router/index.js

// 0.如果使用模块化机制编程，导入Vue和VueRouter
    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    // 1. 定义（路由）组件
    const HelloWorld = { template: '<p>hello vue菜鸟教程</p>' }
    const aa = { template: '<p>vue菜鸟教程aaaa</p>' }
    // 2. 定义路由
    // 每个路由应该映射一个组件。
    // http://localhost:8080/#/a/
    // http://localhost:8080/#/hello/
    // 浏览器访问路径中的#是因为在入口js文件中，如果你不更改设置的话
    // vue会默认使用hash模式，该模式下回将路径格式化为 # 开头。
    // 在创建的router对象中，如果不配置mode，就会使用默认的hash模式
    // 该模式下将路径格式化为#！开头
    // 添加mode后，浏览器访问
    // http://localhost:8080/a
    // http://localhost:8080/hello
    const routes = [
      { path: '/hello', component: HelloWorld },
      { path: '/a', component: aa }
    ]
    
    // 3. 创建 router 实例，然后传 `routes` 配置
    export default new Router({
      mode: 'history',
      routes: routes
    })
    
    // 4. 在App.vue中router-view创建和挂载根实例
    /* <template> <div id="app"> <img src="./assets/logo.png">  <router-view/> </div> </template> */

发表评论取消回复

表情：

评论列表（有 0 条评论，602人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 常用路由守卫

全局前置守卫 to:router即将进入的路由对象 from:当前导航即将离开的路由 next:Function,进行管道中的一个钩子，如果执行完了，则

柔情只为你懂/ 2023年06月12日 04:12/ 0 赞/ 103 阅读

相关 VUE_vue动态路由，引入所有路由，vue路由模块化

require.context 主要使用require.context实现前端工程化动他引入文件 require.context(directory, useSubdir

蔚落/ 2022年11月04日 00:52/ 0 赞/ 269 阅读

相关 vue 路由、嵌套路由、动态路由

简介路由就是一套映射规则，当url中的哈希值（\hash）改变时，路由会根据制定好的规则，展示对应的视图组件。 vue中的路由路径分为：相对路径（不带 ‘/’，会拼接

朴灿烈づ我的快乐病毒、/ 2022年10月29日 13:28/ 0 赞/ 388 阅读

相关 AngularJS 路由 resolve用法

ng-route模块中的`when()`和ui-route的`state()`都提供了resolve属性。为什么需要使用resolve？当路由切换的时候，被路由

绝地灬酷狼/ 2022年06月10日 03:59/ 0 赞/ 179 阅读

相关 vue 路由

[https://router.vuejs.org/zh-cn/][https_router.vuejs.org_zh-cn] 用 Vue.js + vue-router 创

蔚落/ 2022年06月07日 10:54/ 0 赞/ 268 阅读

相关 vue路由router-view用法

此文件位置：myproject/src/router/index.js // 0.如果使用模块化机制编程，导入Vue和VueRouter import Vue

落日映苍穹つ/ 2022年05月15日 12:22/ 0 赞/ 603 阅读

相关 vue路由

一、App.vue中的<router-view></router-view> 凡是定义到index.js中的组件，都会被渲染到App.vue中二、路由跳转和a标签的

秒速五厘米/ 2022年03月08日 11:24/ 0 赞/ 370 阅读

相关 Vue路由

vue-router 基本使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

蔚落/ 2022年02月24日 02:56/ 0 赞/ 320 阅读

相关 Vue-cli项目中路由的基础用法，以及路由嵌套

文件目录： ![70][] 编辑router文件夹下的index.js文件 · 第一步：引用vue和vue-router ，Vue.use（VueRouter）

柔情只为你懂/ 2021年09月15日 22:24/ 0 赞/ 265 阅读

相关 vue路由

vue路由一、vue关于路由的5个重要对象 > 1、router-view：类似angular中的router-outlet，router-view会不断的改

浅浅的花香味﹌/ 2021年09月15日 14:48/ 0 赞/ 514 阅读