Vue 路由进阶 - 动态路由

路由进阶 - 动态路由

核心功能

• 路由传参
• 路由接参

• 动态路由：

  • url中路由是改变的，但是改变路由公用一个组件
  • 举例：
    • localhost:3000/detail/001?a=1&b=2
    • localhost:3000/detail/002?a=2&b=3
    • detail

• vue cli3 配置反向代理 20分钟

  • 在根目录下面新建一个 vue.config.js

  // vue.config.js中可以默认直接使用  http-proxy-middleware
  module.exports = {
    devServer: {
      proxy: {
        '/douban': { // /douban 是一个标记
          target: 'http://api.douban.com', // 目标源
          changeOrigin: true, // 修改源
          pathRewrite: {
            '^/douban': '' 
          }
        },
        '/siku': {
          target: 'https://android.secoo.com',
          changeOrigin: true,
          pathRewrite: {
            '^/siku': ''
          }
        }
      }
    }
  }

/*
	注意： 修改了项目配置文件，项目必须重启
*/

• 路由的传参 10分钟

  <router-link :to = "{name: 'list',params: {id: xxx}, query: {xxx:xxx}}"></router-link>

• 路由的接参

  • 我们发现凡是使用了路由的组件，我们统称为： 路由组件
  • 路由组件身上会自动添加一个 $route的数据

    id: this.$route.params.id
    query: this.$route.query.xxx
  

• 编程式导航 5分钟

  • push
    • this.$router.push('/home')
    • this.$router.push({name,params,query})
    • push可以将我们的操作存放到浏览器的历史记录
  • replace
    • this.$router.replace(’/home’)
    • this.$router.replace({name,params,query})
    • replace没有将我们的操作存放到浏览器的历史记录， 效果为返回了二级
  • push/replace的参数就是to属性的参数

• 业务：

  • 按钮的返回
    • push
    • replace
    • back
    • go