Vue学习笔记(四)——Vue路由

最新推荐文章于 2023-12-20 15:32:24 发布

hsy_siying

最新推荐文章于 2023-12-20 15:32:24 发布

阅读量282

点赞数 1

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/qq_45859070/article/details/119941591

版权

本文详细介绍了Vue.js中的单页面应用概念，以及Vue Router如何提供路由功能，动态加载组件。通过设置路由，包括path、component、name和redirect，实现了组件间的切换和重定向。动态路由的使用，包括通过`:username`和`:id`参数传递动态信息，并在组件中监听和使用这些参数。动态路由的设置使得页面能够根据参数变化自动调整，便于参数传递和页面跳转。

摘要由CSDN通过智能技术生成

vue是一个单页面程序应用，即使有无数个vue文件，也只是vue页面中的组件s

vue-router是vue的一个插件，用来提供路由功能，通过路由的改变动态加载组件，达到开发单页面程序的目的

设置了路由之后，不需要再注册组件，只需要注册了路由之后，通过path、name进行组件之间的切换

路由应用

1.声明组件

let com = {	
    data(){ return{} },
    template:``,
 }

2.声明路由router，创建一个路由实例，可以为router设置：

1）path路径

2）component组件，定义组件之后，会通过路由将组件显示出来，并且不用再注册组件

3）name命名，再路径较为麻烦并且不好记的时候，可以为路由命名，方便之后的路由跳转

4）redirect重定向，例如：当用户想要访问/a的时候，但是redirect:'/b'，那么url就会被替换为/b，然后匹配路由为/b，显示的内容也是/b路径下的内容。

redirect重定向多用于为空白的根路径添加默认打开页面

let router = new VueRouter({
 	//设置路由的配置，path、component、name   
	routes:[
     	//【/】表示根路径，redirect重定向到/a下   
        {path:'/',redirect:'/a'},
        //定义组件component，为/a路径命名name：'comA'
        {path:'/a',component:comA,name:'comA'},
        //alias别名，当访问/a的时候，url上保持为/a，但是路由匹配的是/b，显示的也是/b中的内容
        {path:'/b',component:comB,alias:'/a'}
    ]
})

3.注册路由，再vue实例中进行注册

let vm = new Vue({
    el:'#app',
    data:{},
    //注册组件
    //components:{ myCom:component },
    //注册路由
    router  //router:router
})

4.路由的使用以及加载相应组件

<body>
    <div id="app">
     	<!-- 路径的链接   实现路由的跳转 -->   
        <router-link to='/a'></router-link>
        <!-- 路由视口  用来加载对应的组件 -->
        <router-view></router-view>
    </div>
</body>

动态路由

当需要将某种模式匹配到的所有路由全部映射到同个组件时候，就可以使用到动态路由。
动态路由的动态路径参数以【：】开头
当匹配到一个路由时候，参数值会被设置到this.$route.params中

1.设置动态路由，运用【：】

let router = new VueRouter({
    routes:[
        {path:'/user/:username/:id',component:comU}
    ]
})

2.在模板中添加路由信息

<router-link to="/user/zhangsan/1001"></router-link>

3.获取路由携带参数并且对参数进行监听

//声明组件comU
let comU = {
    data(){
        return{
            id:null,
            username:null
        }
    },
    //template中保存html模板
    template:``,
    //在created钩子函数中调用对应的属性
    created(){
        //匹配到一个路由的时候，参数值会被设置到this.$route.params中
        this.id = this.$route.params.id;
        this.username = this.$route.params.username;
    },
    //设置监听
    watch(){
        $route(to,from){
            this.id = to.params.id;
            this.username = to.params.username;
        }
    }
}

很明显，有了动态路由我们就能够根据链路和节点的变化适时的进行自动调整，可以动态的传递参数来达到页面的跳转。

下列是有关于动态路由学习的完整代码块，此代码仅供参考：

<body>
    <div id="app">
        <!-- 调用路由  动态传递路由参数 /user/id/1001/username/zhangsan -->			<!-- 其中  1001和zhangsan  就是动态路由参数，可以动态进行更改-->
        <router-link to="/user/id/1001/username/zhangsan"></router-link>
    </div>
    <script>
    	//声明组件
        let user = {
            data(){
                return{
                    //路由中动态传递的参数在组件的data数据模型中进行声明
                    id:null,
                    username:null
                }
            },
            methods:{},
            template:`
				<div>
                      我是A组件
                      {{id}}
                      {{username}}
                 </div>
			`,
            created(){
                this.id = this.$route.params.id
                this.username = this.param.username
            },
            //对动态参数进行监听
            watch:{
                $route(to,from){
                    this.id = to.params.id
                    this.username = to.params.username
                }
            }
        }
        //声明路由
        let router = new VueRouter({
            routes:[
                //【：】表示的是动态路径，作为一个路径参数，可以动态传参
                {path:'/user/id/:id/username/:username',component:user}
            ]
        })
        //声明vue实例，注册路由
        let vm = new Vue({
            el:'#app',
            data:{},
            methods:{},
            create(){},
            router   //router:router
        })
    </script>
</body>

hsy_siying

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记(四)——Vue路由

vue是一个单页面程序应用，即使有无数个vue文件，也只是vue页面中的组件svue-router是vue的一个插件，用来提供路由功能，通过路由的改变动态加载组件，达到开发单页面程序的目的设置了路由之后，不需要再注册组件，只需要注册了路由之后，通过path、name进行组件之间的切换路由应用1.声明组件let com = { data(){ return{} }, template:``, }2.声明路由router，创建一个路由实例，可以为router设置：
复制链接

扫一扫