搞懂vue-router_vue使用路由,单击按钮后获取网页上的图片-CSDN博客

本文链接：https://blog.csdn.net/weixin_66619918/article/details/122812175

记录学习过程，如有问题，欢迎指导。
在这里插入图片描述

概念

传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。就是当我们点击Home按钮的时候，页面显示Home页面的内容，点击About按钮的时候，页面显示About页面内容，也就是一种映射关系。

搞清楚3个概念，route,routes,router。此处参考https://www.cnblogs.com/SamWeb/p/6610733.html

1、route: 英文单词意思是路线，而且从单词上可以看出是单数。route指的是单个路由，例如home按钮—>home页面，这就是一条路由。

2、routes：route的复数，是一组路由，把route每一条路由组成数组。

[{home按钮—>home页面},{about按钮—>about页面}]。

3、 router 来管理路由。上述的只是定义了路由，但是无法起到真正的作用，这个时候就需要router了，它可以到routes数组中去寻找按钮对应的页面内容。

实现

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y617NFZg-1644226573458)(D:\resource\Typora-img\image-20220128102006554.png)]$

路由跳转过程：点击我们需要切换的菜单，网址路径产生变化，去寻找相应组件渲染在页面上。

页面中所有内容都是组件化的，我们需要做的就是将组件和路径对应起来。

1、router-view、router-link

<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。就是点击之后，显示页面的地方，我们可以称它为占位符。

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。就是我们点击的地方，并且有一个重要的to属性来指定目标地址。例如：Home

2、

在创建项目的时候会产生一个router文件夹，里面的index.js进行路由的配置。主要分为三个部分。

第一部分：定义route单条路由，多条路由组成routes。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
]

第二部分：创建router对定义的路由进行管理。

const router = new VueRouter({
  routes
})

第三部分：在main.js中引入router。

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

创建一个小demo

1、src目录下创建两个组件，home.vue，about.vue
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1P9eJZqb-1644226573460)(D:\resource\Typora-img\image-20220126135536923.png)]$
home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <div>{{msg}}</div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      msg: 'home组件'
    }
  }
}
</script>

about.vue

<template>
  <div class="about">
    <img alt="Vue logo" src="../assets/logo.png" />
    <div>{{ msg }}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'about组件'
    }
  }
}
</script>

2、在App.vue中定义router-view以及router-link

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

3.配置router文件中的index.js，定义路径和组件
如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如果选择y，后面下载依赖会自动下载vue-router，会在src文件夹下生成router文件。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4.在main.js中引入router

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

这是点击页面的about和home按钮就可以进行切换了
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5mew3CGK-1644226573460)(D:\resource\Typora-img\image-20220126141241061.png)]$

动态路由

有些网站登录进去会出现 XXX,欢迎您的字样，名称不一样，这是可以使用动态路由。

1、创建一个新页面user.vue

<template>
  <div class="user">
    动态路由{{$route.params.id}}
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

2、在router文件夹下的index.js中添加user的路径

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../views/User.vue')
  }
]

3、App.vue中加入跳转

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/user/123">User</router-link>
    </div>
    <router-view/>
  </div>
</template>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8rbN2U4x-1644226573461)(D:\resource\Typora-img\image-20220126145432278.png)]$

嵌套路由

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vUajfdHS-1644226573461)(D:\resource\Typora-img\image-20220126152105124.png)]$

我们在浏览网站的时候通常会看到，一个菜单下还有其他的子菜单，如图所示红色框框区域就是子菜单，形成嵌套路由。

const routes = [
    {
        path:"/home",
　　　　　// 下面这个属性也不少，因为，我们是先进入home页面，才能进入子路由
        component: home,
　　　　 // 子路由
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "tablet",
                component: tablet
            },
            {
                path: "computer",
                component: computer
            }
        ]
    },
    {
        path: "/about",
        component: about
    },
    {
        path: "/user/:id",
        component: user
    },
]

几种路由跳转方式

1、router-link

(1)带参数

// 带参数
<router-link to="/user/456">User456</router-link>

<router-link :to="{name:'home', params: {id:1}}">  
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失（比如，点击某件商品图片的“查看详情”，跳转到该商品的详情页面，刚开始进入详情页面时能拿到数据（根据商品id获取），刷新页面后，id丢失，页面就取不到相应的数据了）
// 配置path,刷新页面id会保留
// html 取参  $route.params.id
// script 取参  this.$route.params.id
 
<router-link :to="{name:'home', query: {id:1}}"> 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参  $route.query.id

(2)不带参数

//不带参数
<router-link to="/about">About</router-link>

2、编程式导航this.$router.push()

(1)带参数

//query传参
this.$router.push({name:'Home',query: {id:'1'}})

//params传参
this.$router.push({name: 'home',params: {id: '1'}})

(2)不带参数

this.$router.push('/home')

3、this.$router.replace()
描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

4、this.$router.go(n)
相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面