路由应用

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>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-08-27 11:46:11 更:2021-08-27 11:48:00

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/23 13:08:34-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码