动态路由 & 路由传参 & 编程式导航

动态路由 & 路由传参 & 编程式导航

• vue cli3 配置反向代理
• 在脚手架根目录下面新建一个 vue.config.js

// vue.config.js中可以默认直接使用 http-proxy-middleware
module.exports = {//暴露出去
    devServer: {
        proxy: {
            '/douban': {
            // /douban 是一个标记
            target: 'http://api.douban.com',
            // 目标源，表示去那个页面
            changeOrigin: true, 
            // 是否把路径修改成这个路径，因为我们现在文件打开的路径是localhost:8080,所以要改
            pathRewrite: {
                '^/douban': ' '//等于空
                //这个表示到时候删除这个，因为请求数据时候会会加上这个表标识，但是真的路径上是没有这个标识的，所以要删除， ^ 表示删除匹配到的第一个
            }
        }
}

先安装axios，因为需要访问别人的数据，然后在mian.js页面把axios挂载在全局，这样就可以在哪里都能调用了

import axios from 'axios'//引入axios，安装在全局的包会放在全局的node_modules里面，所以引用时直接导入就行，脚手架自动配置好了路径，所以才能这样导入
Vue.prototype.$http = axios;//通过原型将axios挂载在全局，在哪里都能调用

访问别人的数据

//写在需要展示的路由页面，下面获取到了数据就可以就可以在上面渲染页面了
export default {
    data () {
        return {
            result: null//创建一个变量
        }
    },
    created () {
        this.$http.get('/siku/appservice/cartAndBrand.action',{//通过axios访问别人的数据
            params: {//这是携带的参数
                v: 2.0,
                _: 1556415893060,
                callback: 'jsonp1'
            }
        })
        .then( res => {
          this.result=JSON.parse(res.data.slice(7,-1)).rp_result.categorys//把数据返回出来
            console.log(this.result)
        })
        .catch( error => console.log( error ))
    }
}

• 路由的传参

<router-link :to = "{name: 'list',params: {id: xxx}, query: {xxx:xxx}}"></router-link><!--这里使用了命名路由,参数直接在后面加，params{ }-->

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

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

- 编程式导航

• push

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

  • this.$router.push({name,params,query})
  • push可以将我们的操作存放到浏览器的历史记录

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

  • this.$router.replace(’/home’)
  • this.$router.replace({name,params,query})

• replace没有将我们的操作存放到浏览器的历史记录， 效果为返回了二级

//写一个方法，绑定给一个按钮，返回上级目录
methods:{
    goback () {
        // console.log(this.$router)//可以输出一个this.router来看看
        // this.$router.push('/login')//返回指定文件
        // this.$router.replace('/login')
        this.$router.go(-1)//返回上级目录
       }
}

//还可以使用go，back