路由

2022-08-14 00:33:05 阅读：156 来源： 互联网

路由

1. 路由链接 (通过路由跳转到组件)

<router-link to="路由规则"></router-link>

2. 路由占位: 要跳转到的组件

<router-view></router-view>
localhost:8081/路径     当前跳转的就是该路径对应的组件的占位

3. 路由文件

src/router/index.js

该文件中需要了解两个模块

1.  声明路由的对象
	const routes=[
    {
        path:'/路由规则',
        name:'路由名字',
        component:路由对应的组件

        加载组件有两种方法:
            1) 在上面使用import导入组件,在component中使用这个组件
                例如:
                    import 组件名 from '组件文件路径'
                    component:组件名
                
            2) 使用懒加载的方法加载组件 (推荐)
                例如:
                    component: () => import(/*魔法注释*/ '组件文件路径')
                    注意: 使用懒加载,不需要在上面导入组件
                    component: () => import(/* webpackChunkName: "名" */ '../views/HomeView.vue')

    },
    {},
    ...
]
    
2. 路由模式
	history
    hash

4. 路由跳转

(1) <router-link to="路由规则"></router-link>
    携带参数:
    to="路由规则 ? 参数=值&参数=值&..."

(2) 通过点击按钮触发方法,在方法中实现跳转
    第一种: 路由跳转的方法 => 直接传递参数:
        1) push()
			函数(){
                this.$router.push('/路由?参数1=值1&参数2=值2')
            }
            => A页 跳转 B页  (B页是新页,A页存在)
        2) replace()
			函数(){
                this.$router.replace('/路由?参数1=值1&参数2=值2')
            }
			=> A页 切换 B页  (A页被替换)

	第二种: 路由跳转的方法:(push | replace) => 通过对象方法传递参数
        函数(){
			this.$router.push|replace({
                path:'/路由',
                query:{
                    参数1:值1,
                    参数2:值2
                }
            })
        }

	第三种: 通过name属性跳转路由且携带参数
    	函数(){
            this.$router.push|replace({
                name:'路由名',
                query:{
                    参数1:值1,
                    参数2:值2
                }
            })
        }

	第四种: 使他人无法区分是路由还是参数的方法 xxx/xxx/xxx
		函数(){
            this.$router.push|replace('/路由'+this.参数)
        }
		//如果是这种书写方式,必须要修改路由规则中的path:
		{
            path:'/路由/:参数'
        }

5. 在组件中接收传递的参数

xxx.vue
    需要将接收的参数的代码写在声明周期函数中
    created(){
        this.$route.query   => 里面是对象(参数:值,参数:值)
        (eg: 可以写为 this.id=this.$route.query.id)
    }

6. 路由嵌套

示例: xxx管理系统的 厂字格式

//外层路由
{
    path:'/路由',
    name:'路由名',
    component: () => import(/*魔法注释*/ '组件文件路径'),
    
    //子路由
    children:[
        {
    		path:'/路由',
    		name:'路由名',
    		component: () => import(/*魔法注释*/ '组件文件路径'),
		},
        {
    		path:'/路由',
    		name:'路由名',
    		component: () => import(/*魔法注释*/ '组件文件路径'),
		}
    ]
    
}

路由重定向

{
    path:'/home',
    name:'路由名',
    component: () => import(/*魔法注释*/ '组件文件路径'),
}
{
	path:'/',
	//路由重定向: 当我们路由在根目录下时会自动定向到/home的路由
	redirect:'/home'
}

标签：component,参数,跳转,组件,path,路由
来源： https://www.cnblogs.com/ashuang/p/16584630.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

路由