Vue_的路由

川长思鸟来 2022-05-20 23:34 143阅读 0赞

什么是路由呢？

路由就是根据网址的不同，返回不同的内容给用户

router-view显示的是当前路由地址所对应的内容

路由的配置都放在router文件下的index.js文件里。

我们对我们新建的项目进行优化，我们所有的代码编写基本都是在src项目中，所以对里面的内容进行改写。

当我们访问根文件的时候，希望返回的是首页。

eg:我们建了一个home的Vue组件，也建了一个list的组件

<template>
        <div>hello home</div>
    </template>
    <script> export default{ name:'Home' } </script>
    <style></style>

list一致。在router中就可可以配置它们的路由了。

import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '@/pages/home/home.vue'
    import List from '@/pages/list/list.vue'
    
    
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Home',
          component: Home
        },
        {
          path: '/list',
          name: 'List',
          component: List
        }
      ]
    })

注意：import XXX的名字要和组件中name 的名字最好一致，后续比较好维护。

这样我们再来浏览器中输入地址，就会跳转到响应的页面  
![这里写图片描述][70]  
![这里写图片描述][70 1]

在APP.vue 中，我们有router-view，意思为显示当前路由对应的内容。所以就实现了输入地址显示相应页面的功能。

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>

[70]: /images/20220521/4da9ddde8179476c8252b474276331c2.png
[70 1]: /images/20220521/0a43aaccdad84d9da601f6948fd6feda.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

相关 vue 路由

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

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

相关 Vue_的路由

什么是路由呢？路由就是根据网址的不同，返回不同的内容给用户 router-view显示的是当前路由地址所对应的内容路由的配置都放在router文件下的index.js

川长思鸟来/ 2022年05月20日 23:34/ 0 赞/ 144 阅读

相关 Vue路由

一个实例： <!DOCTYPE html> <html> <head> <title>Vue.js路由router</title>

绝地灬酷狼/ 2022年05月10日 09:44/ 0 赞/ 221 阅读

相关 vue路由

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

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

相关 Vue路由

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

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

相关 vue路由

Vue.js - vue路由一什么是路由 1. 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 2. 前端

灰太狼/ 2022年01月05日 07:23/ 0 赞/ 297 阅读

相关 Vue路由（嵌套路由）的使用

1、vue-router介绍 vue-router是Vue.js的路由插件。适合用于构建单页面应用，基于路由和组件；路由用于设定访问路径，将路径和组件映射起来。路径

￡神魔★判官ぃ/ 2021年09月20日 09:08/ 0 赞/ 498 阅读

相关 vue路由

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

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