路由

路由

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'
}