Vue全家桶之 router(路由)

最新推荐文章于 2023-06-18 14:13:48 发布

冰镇奶茶

最新推荐文章于 2023-06-18 14:13:48 发布

阅读量632

点赞数 1

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_57002951/article/details/124179971

版权

笔记专栏收录该内容

29 篇文章 3 订阅

订阅专栏

Vue的路由

通常搭配component使用

【1】Vue中路由router的基本使用

定义：vue router 是vue js 官方路由管理器，它和vue.js的核心深度集成，让构建单页面应用变得易如反掌

通过使用vue Router 可以将现有的Vue开发变得更加灵活，他可以根据前端请求的url不同对应在页面中展示不同的组件

先配置一个路由规则

组件先交给路由管理

a、下载 vue router js 并在页面中引用

b、创建路由规则并注册

const router = new VueRouter({}) ------------------------ 创建路由规则对象

path: '/login', //path代表路由路径

component: login //component代表路由路径对应的组件

redirect : ' ' // 代表路由重定向

path : ' * ' //通配符匹配任意路由

c、在页面展示路由组件

  
  <div id="app">
          <div>{{msg}}</div>
          <!-- 显示路由的标签 -->
          <a href="#/login">用户登录</a>
          <a href="#/reg">用户注册</a>
          <router-view></router-view>
  </div>

d、添加切换路由的连接

path: '/login',   //path代表路由路径

component: login //component代表路由路径对应的组件

#/ ---------------------------------哈希路由

路由重定向： redirect : ' '

【2】Vue中路由切换的两种方式

（1）通过标签形式切换路由 ------------------------------使用router-link切换路由

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 路径切换路由:根据路由对象的路径切换路由显示不同的组件  -->
        <!-- a标签切换路由 （最简单）-->
        <a href="#/login">用户登录</a>
        <a href="#/register">用户注册</a>

        <!-- link 切换路由的标签 (类似a标签) 标签上必须加入to属性  to="路由路径"-->
        <router-link to="/login">用户登录</router-link>
        <router-link to="/register">用户注册</router-link>
        <!-- 切换路由标签 -->
        <router-link :to="{path:'/login'}">用户登录</router-link>
        <router-link :to="{path:'/register'}">用户注册</router-link>

        
        
        <!-- 名称切换路由：根据路由对象的名称切换路由显示不同的组件 -->
        <!-- 根据名称切路由只能使用router-link  推荐使用命名路由-->
        <router-link :to="{name:'Login'}">用户登录</router-link>
        <router-link :to="{name:'Register'}">用户注册</router-link>
        
        
        
        
        <!-- 展示路由组件标签 -->
        <router-view></router-view>
    </div>
</body>

推荐使用命名路由

<script src="../../js/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
<script>
    // 登录组件
    const login = {
        template: `<div><h1>用户登录</h1></div>`
    };
    //注册组件
    const register = {
        template: `<div><h1>用户注册</h1></div>`
    };
    //创建路由规则对象
    var router = new VueRouter({
        //定义路由规则
        routes: [{
            //name:代表路由对象名称   用来给路由对象一个唯一名称标识
            path: '/login',
            component: login,
            name: 'Login'
        }, {
            path: '/register',
            component: register,
            name: 'Register'
        }]
    })
    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue router 基本使用之使用 router-link 切换路由"
        },
        //注册路由对象
        router,
    })
</script>

(2) 通过 js 代码形式切换路由

this.$route object ---- 当前路由对象 this.$router vueRouter --- 路由管理器对象

在vue路由中，多次切换同一个路由存在的问题

1、在vue中多次切换相同路由会出现错误。

解决方案：

a、第一种：每次切换路由之前手动判断

if(this.$route != 'Login'){

this.$router.push({path:'Login'});

}

b、在创建路由规则对象之后加入以下配置

this.$router.push("/location").catch((err) => { console.log(err); });

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <button @click="login">用户登录</button>
        <button @click="register">用户注册</button>
        <!-- 展示路由组件标签 -->
        <router-view></router-view>
    </div>
</body>


<script src="../../js/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
<script>
    const login = {
        template: `<div><h1>用户登录</h1></div>`
    };
    const register = {
        template: `<div><h1>用户注册</h1></div>`
    };
    //创建路由规则对象
    const router = new VueRouter({
        routes: [{
            path: '/login',
            component: login,
            name: 'Login'
        }, {
            path: '/register',
            component: register,
            name: 'Register'
        }]
    })
    const app = new Vue({
        el: "#app",
        data: {
            msg: "使用 js 代码的形式切换路由"
        },
        methods: {
            login() {
                //发送axios请求完成登录   响应回来之后切换路由到主页
                //this.$route object ---- 当前路由对象    this.$router vueRouter --- 路由管理器对象
                console.log(this)
                    // 使用路由器对象切换
                this.$router.push('/login'); //切换路由 （根据路径切换或者根据名字切换）
                this.$router.push({
                    path: '/login'
                });
                this.$router.push({
                    name: 'Login'
                }); //使用名称切换
            },
            register() {
                this.$router.push({
                    name: 'Register'
                }); //使用名称切换
            }
        },
        //注册路由对象
        router,
    })
</script>

【3】Vue router 基本使用之参数传递

地址栏传递参数分为两种方式：

第一种：queryString ? ----------- 使用 this.$router.query.key 接收

第二种：restful 路径传递参数 ---------- / XX / 21 使用 this.$router.params.key 接收

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- [1] queryString 传参 -->
        <router-link :to="{path:'/login?name=小小&password=123'}">用户登录</router-link>
        <router-link :to="{path:'/register'}">用户登录</router-link>
        <!-- 展示路由组件标签 -->
        <router-view></router-view>
    </div>
</body>

<script src="../../js/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
<script>
    const login = {
        template: `<div><h1>用户登录</h1></div>`,

        created() {
            console.log("created");
            console.log(this.$route); //获取当前路由对象
            console.log(this.$route.query.name); //获取当前路由对象
            console.log(this.$route.query.password); //获取当前路由对象
        }
    };
    const register = {
        template: `<div><h1>用户注册</h1></div>`
    };
    const router = new VueRouter({

        routes: [{

            path: '/login',
            component: login,
            name: 'Login'

        }, {

            //[2] request 路径传参
            path: '/register/:id/:name',
            component: register,
            name: 'Register'
        }]
    });
    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue router 基本使用之参数传递"
        },
        router,
    })
</script>

冰镇奶茶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue全家桶之 router(路由)

定义：vue router 是vue js 官方路由管理器，它和vue.js的核心深度集成，让构建单页面应用变得易如反掌通过使用vue Router 可以将现有的Vue开发变得更加灵活，他可以根据前端请求的url不同对应在页面中展示不同的组件
复制链接

扫一扫