vue路由

Vue前端路由

1. 路由的基本概念与原理

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。

后端路由
  • 概念：根据不同的用户URL请求，返回不同的内容
  • 本质：URL请求地址与服务器资源之间的对应关系
前端路由
  • 概念：根据不同的用户事件，显示不同的页面内容。
  • 本质：用户事件与时间处理函数之间的对应关系。

<div id="app">
    <!--  切换组件的超链接  -->
    <a href="#/zhuye">主页</a>
    <a href="#/keji">科技</a>
    <a href="#/caijing">财经</a>
    <a href="#/yule">娱乐</a>
    <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
    <!-- 可以把 component 标签当做是【组件的占位符】 -->
    <component :is="comName"></component>
</div>
<script>
    //定义4个组件
    const zhuye = {
        template:'<h1>主页信息</h1>'
    }
    const keji = {
        template:'<h1>科技信息</h1>'
    }
    const caijing = {
        template:'<h1>财经信息</h1>'
    }
    const yule = {
        template:'<h1>娱乐信息</h1>'
    }

    var vm = new Vue({
        el:"#app",
        data:{
            comName:'zhuye'
        },
        components:{
            zhuye,
            keji,
            caijing,
            yule,
        }
    })

    // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
    window.onhashchange=function () {
        switch (location.hash.slice(1)) {
            case '/zhuye':
                vm.comName = 'zhuye'
                break
            case '/keji':
                vm.comName = 'keji'
                break
            case '/caijing':
                vm.comName = 'caijing'
                break
            case '/yule':
                vm.comName = 'yule'
                break
        }
    }
</script>

vue-router的基本使用

1.引入库文件

//注意顺序vue-router依赖vue
<script src="vue.js"></script>
<script src="vue-router.js"></script>
2.添加路由链接

<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接.会被渲染为href属性 -->
<!-- `to`属性的值会被渲染为#开头的hash地址 -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
3.添加路由填充位

<!-- 路由填充位（也叫作路由占位符）路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
4.定义路由组件

    const User ={
        template:'<h1>User 组件</h1>'
    }

    const Register ={
        template:'<h1>Register 组件</h1>'
    }
5.配置路由规则并创建路由实例

//创建路由实例对象
var router = new VueRouter({
    //router 是路由规则数组
    routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则对应要展示的组件
        {path:'/user',component:User},
        {path:'/register',component:Register}
    ]
})
6.把路由挂载到Vue实例中

var vm = new Vue({
        el:"#app",
        data:{

        },
        //挂载路由实例对象，es6中属性和值相同可以简写成一个；
        //router:router,
        router,
    })
完整

<script src="vue.js"></script>
<script src="vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接.会被渲染为href属性 -->
        <!-- `to`属性的值会被渲染为#开头的hash地址 -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/user">Go to User</router-link>
        <router-link to="/register">Go to Register</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<script>
    const User ={
        template:'<h1>User 组件</h1>'
    }

    const Register ={
        template:'<h1>Register 组件</h1>'
    }

    //创建路由实例对象
    var router = new VueRouter({
        //router 是路由规则数组
        routes:[
            //每个路由规则都是一个配置对象，其中至少包含path和component两个属性
            //path表示当前路由规则匹配的hash地址
            //component表示当前路由规则对应要展示的组件
            {path:'/user',component:User},
            {path:'/register',component:Register}
        ]
    })

    var vm = new Vue({
        el:"#app",
        data:{

        },
        component:{
            User,
            Register
        },
        //挂载路由实例对象，es6中属性和值相同可以简写成一个；
        //router:router,
        router,
    })
</script>

路由重定向

//router对象中router数组中添以下规则
//其中，path表示需要被重定向的原地址，redirect表示要被重定向的新地址
{path: '/',redirect:'/user'},

vue-router嵌套路由

嵌套路由功能分析
  • 点击父级路由链接显示模板内容
  • 模板内容中又有子级路由链接
  • 点击子级路由链接显示子级模板内容

<script src="vue.js"></script>
<script src="vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接.会被渲染为href属性 -->
        <!-- `to`属性的值会被渲染为#开头的hash地址 -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/user">Go to User</router-link>
        <router-link to="/register">Go to Register</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<script>
    const User ={
        template:'<h1>User 组件</h1>'
    }

    const Register ={
        template:`
            <div>
                <h1>Register 组件</h1>
                <router-link to="/register/tab1">Go to tab1</router-link>
                <router-link to="/register/tab2">Go to tab2</router-link>
                <router-view></router-view>
            </div>
        `
    }

    const tab1={
        template:'<h2>tab1</h2>'
    }
    const tab2={
        template:'<h2>tab2</h2>'
    }


    //创建路由实例对象
    var router = new VueRouter({
        //router 是路由规则数组
        routes:[
            //每个路由规则都是一个配置对象，其中至少包含path和component两个属性
            //path表示当前路由规则匹配的hash地址
            //component表示当前路由规则对应要展示的组件
            {path: '/',redirect:'/user'},
            {path:'/user',component:User},
            
            //children数组表示子路由规则
            {path:'/register',component:Register,children:[
                    {path:'/register/tab1',component:tab1},
                    {path:'/register/tab2',component:tab2}
                ]},

        ]
    })

    var vm = new Vue({
        el:"#app",
        data:{

        },
        component:{
            User,
            Register
        },
        //挂载路由实例对象，es6中属性和值相同可以简写成一个；
        //router:router,
        router,
    })

vue-router动态路由匹配

<script src="vue.js"></script>
<script src="vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <router-link to="/user/1">Go to User1</router-link>
        <router-link to="/user/10">Go to User2</router-link>
        <router-link to="/register">Go to Register</router-link>
    </p>
    <router-view></router-view>
</div>
<script>
    const User ={
        //路由组件中通过$route.params获取路由参数
        template:'<h1>User 组件{{$route.params.id}}</h1>'
    }

    const Register ={
        template:'<h1>Register 组件</h1>'
    }
    //创建路由实例对象
    var router = new VueRouter({
        routes:[
            {path: '/',redirect:'/user'},
            {path:'/user/:id',component:User},
            {path:'/register',component:Register},
        ]
    })

    var vm = new Vue({
        el:"#app",
        data:{

        },
        component:{
            User,
            Register
        },
        //挂载路由实例对象，es6中属性和值相同可以简写成一个；
        //router:router,
        router,
    })
</script>

vue-router命名路由

{path:'/user/:id',name:'user',component:User,props:route=>({name:'莫逸风',age:22,id:route.params.id})},
<router-link :to="{name:'user',params:{id:1}}">Go to User1</router-link>
完整
<div id="app">
    <h1>Hello App!</h1>
    <p>
        <router-link :to="{name:'user',params:{id:1}}">Go to User1</router-link>
        <router-link to="/user/2">Go to User2</router-link>
        <router-link to="/register">Go to Register</router-link>
    </p>
    <router-view></router-view>
</div>
<script>
    const User ={
        props: ['id'],
        //路由组件中通过$route.params获取路由参数
        template:'<h1>User 组件{{id}}</h1>'
    }

    const Register ={
        template:'<h1>Register 组件</h1>'
    }
    //创建路由实例对象
    var router = new VueRouter({
        routes:[
            {path: '/',redirect:'/user'},
            //命名路由
            {path:'/user/:id',name:'user',component:User,props:route=>({name:'莫逸风',age:22,id:route.params.id})},
            {path:'/register',component:Register},
        ]
    })

    var vm = new Vue({
        el:"#app",
        data:{

        },
        component:{
            User,
            Register
        },
        //挂载路由实例对象，es6中属性和值相同可以简写成一个；
        //router:router,
        router,
    })
</script>

vue-router编程式导航

<script src="vue.js"></script>
<script src="vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <router-link to="/user">Go to User</router-link>
    <router-link to="/register">Go to Register</router-link>
    <router-view></router-view>
</div>
<script>
    const User ={
        template:`
            <div>
                <h1>User 组件</h1>
                <button @click="handel">跳转</button>
            </div>
        `,
        methods:{
            handel:function () {
                this.$router.push('/register')
            }
        }
    }
    const Register ={
        template:`
            <div>
                <h1>Register 组件</h1>
                <button @click="handel">后退</button>
            </div>
        `,
        methods:{
            handel:function () {
                this.$router.go(-1);
            }
        }
    }
    var router = new VueRouter({
        routes:[
            {path:'/register',component:Register},
            {path:'/user',component:User},
        ]
    })

    var vm = new Vue({
        el:"#app",
        data:{

        },
        component:{
            User
        },
        //挂载路由实例对象，es6中属性和值相同可以简写成一个；
        //router:router,
        router,
    })
</script>
router.push()方法的参数规则

//字符串（路径名称）
router.push('/home')
//对象
router.push({path:'/home'})
//命名的路由（传递参数）
router.push({name:'/user',params:{userId:123}})
//带查询参数，编程/register?name=lisi
router.push({path:'/register',query:{name:'lisi'}})

 

posted @   zcz666  阅读(45)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
·  vue-cli
·  vue基础语法
·  vue路由
·  Vue路由（一）
·  Vue Router
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae