vue的cli3中路由的使用

1.创建一个vue的cli3脚手架
2.配置vue cli3的反向代理

• 在根目录下面新建一个 vue.config.js
  下载 axios 第三方跨域插件

yarn add axios -D

• 在根目录下面新建一个 vue.config.js文件
  • 这是一个webpack的配置文件，可以添加，覆盖webpack文件

3.vue.config.js中可以默认直接使用 http-proxy-middleware

module.exports = {
    devServer: {
        proxy: {
            '/siku': {// /douban 是一个标记
                target: 'https://android.secoo.com',//目标源
                changeOrigin: true,//修改源
                pathRewrite: {
                    '^/siku': ''
                }
            }
        }
    }
}

• 在二级路由中获得参数

<script>
export default {
    data(){
        return{
            category:null
        }
    },
    created(){
        this.$http.get('/siku/appservice/cartAndBrand.action',{
        params: {
          v: 2.0,
          _: 1556415893060,
          callback: 'jsonp1'
        }
        })
        .then(res=>{
            console.log(res)
            this.category=JSON.parse(res.data.slice(7,-1)).rp_result.categorys
            console.log(JSON.parse(res.data.slice(7,-1)).rp_result.categorys)
        })
        .catch(error=>console.log(error))
    }
}
</script>

• 路由的传参 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
  

• 编程式导航

  • 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
    • back
    • go

路由进阶部分 – 导航守卫（ 路由守卫 ）

1. 作用： — 类似 【保安】

• 守卫路由
• 进
• 举例： 携带数据进
• 出
• 举例： 事情完成才能出

2. 导航守卫一共有三种形式

• A: 全局导航守卫

1. 全局前置守卫 router.beforeEach(fn)
2. fn中有三个参数
3. 全局的解析守卫
4. 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
5. 必须保证整个项目的守卫和异步路由组件解析完成
6. 全局的后置守卫

• 可以做一些用户友好提示
• B: 路由独享守卫
• 写在路由表中的守卫钩子
• 针对的是和当前路由相关的，那么其他与之不相关的路由，它是无法监听它的变化情况的
• C: 组件内守卫
• 组件内的前置守卫 beforeRouteEnter((to,from,next)=>{})
• 导航进入组件时，调用
• this是访问不到的，如果非要访问this ,必须通过 next(vm=>{})访问
• 因为组件此时没有创建，所以没有this
• 案例： 数据预载（进入组件前就获得数据）

next(vm => { //vm指的就是组件
const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorys
vm.$set(vm.category,'categorys',result)
})

• 组件内的后置守卫
• 当好离开组件时，调用
• this是可以访问到
• 组件内的更新守卫（ 路由传参和路由的接参 ）
• 在当前路由改变，但是该组件被复用时调用
• 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
• 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
• 可以访问组件实例 this

3. 功能： 导航守卫可以监听路由变化情况
4. 名词

• 前置： 要进入当前路由
• 后置： 要离开当前路由

5. 关于next的使用

• next() 等价于 next( true ) 表示可以从当前路由跳转到目标路由
• next( false ) 表示不通过， 表示从当前路由跳转不到目标路由
• next(’/login’) 等价于 next({path:’/login’}) 跳转指定的路由
• next(’/login’) 等价于 next({path:’/login’,params,query})
• next( fn ) 数据预载

6. 业务： 当我们进入到一个项目的首页时，但是当我们没有注册账号时，它主动跳转到了注册/登录页

router.beforeEach((to,from,next)=>{
const name = localStorage.getItem('name')
if( name || to.path === '/login' ){
//如果有 / --> /home
next()
}else{
next('/login')
}
})

7. 业务： 当进入mine页面的时候， 要判断用户是否登录，如果没有登录，跳转登录页
8. 路由导航守卫

• 3中类型 7个路由监听钩子
• 业务：
• 监听整个项目的路由变化情况 全局的前置守卫
• 监听某个路由的变化情况 路由的独享守卫
• 监听的路由组件的路由变化情况 组件内的导航守卫