vue 路由跳转后 怎样去掉指定的组件

Posted 2023-04-30

参考技术A 你需要开启html5 History 模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter(
mode: 'history',
routes: [...]
)

这种配置需要配合后端服务器的配置，如果你对服务器是nginx
location /
try_files $uri $uri/ /index.html;
本回答被提问者采纳

vue路由传参并跳转页面

方式一：query传参

//传参
    go(){
        that.$router.push({
            path:‘/order‘,//跳转路径
            name: ‘Order‘,//跳转路径的name值，不写跳转后页面取不到参数
            // 参数
            query: { 
                name: ‘name‘, 
                dataObj: {}
            }
        })
    }, 

//跳转后页面取参
        mounted(){
            // 路由参数
            let mm = this.$route.query//query包含传递的所有参数
        },
But 浏览器地址栏中显示如下，所以如果参数保密，该方式慎用啦

 

 方式二：parms传参

//传参
        go(){
            this.$router.push({
                path:‘/order‘,//跳转路径
                name: ‘Order‘,//跳转路径的name值，不写跳转后页面取不到参数
                // 参数
                params: { 
                    name: ‘name‘, 
                    dataObj: {}
                }
            })
        },


//跳转后页面取参
        mounted(){
            // 路由参数
            let mm = this.$route.params//parms包含传递的所有参数
        },
是的就是这么相似，但是传递的参数就不会显示在地址栏了，但是有没有注意到跳转路径的name值必传是不是也不够优雅，不传行不行？见方式三



方式三：不传name
不传name需要对路由配置文件的路径做些改动

//传参
       go(){
            let num = ‘33‘
            this.$router.push({
                path:‘/order‘ + ‘/‘ + num,
            })
        },

       //路由配置文件
       {
            path: ‘/order/:id‘,//路由携带的参数
            // path: ‘/order‘,
            name: ‘Order‘,
            component: Order
        },

        //跳转后页面取参
        mounted(){
            // 路由参数
            let mm = this.$route.params//parms包含传递的所有参数
        },