vue-router前端路由语法

待我称王封你为后i 2022-12-14 15:52 182阅读 0赞

## vue-router前端路由 ##

> vue 路由的懒加载

{ 
              path:"Order",
              component:()=>import("../views/Order.vue"),
              name:"Order",
              meta:{ 
                //这里可以携带一些第三方信息
                index:1
              }
            },

> 这样直接组件中加载的路由是不需要在加载首页的时候就开始加载，当你跳转到某个路由的时候才开始加载，一般除了首页跟数据比较多的页面建议使用这种写法

首页路由加载写法  
直接在头部import 导入就行

vue-router是一个前端路由，他可以根据路由地址来动态的显示某些组件  
首先使用`vue-router.js`

router:{ 
    //初始化路由
     	routes:new VueRouter([
     		{ 
     			path:"/路径"  //此处路径要加‘/’,
     			component:组件名，
     			name：路径名
     		},{ 
     			path:"/"
     			redirect:{ 
     				name:"路由名"  //此处输入/自动跳转某个路由
     			}
     		}
     	])
     	components:{ 
     	//在使用路由调用组件可以不用注册
     	}
    }

> 写好路由后，要在想显示的地方加个`<router-view />`,在创建vue对象的时候，向内部配置一个属性`router`,这个属性后面初始化了一个路由对象`new VueRouter()`内部是一个配置对象

> 注意，如果路由配置好了以后，`vue-router`会根据路由地址来动态显示组件，但是一定要在页面上的某个地方添加`<router-view />`来显示你的组件，否则无效

#### 路由之间的跳转 ####

路由跳转的方式两种

> 1.通过`<router-link>`标签去跳转，  
> 2.通过`API`方式去跳转

##### `<router-link>`跳转路由 #####

<router-link :to="{name:'register'}">我要去注册页面看地下</router-link>

> `router-link`默认会帮我们生成一个`a`标签，并且`href`地址也会帮我们生成好！上面的代码会生成下面的代码

<a href="#/register" class="">我要去注册页面看地下</a>

如果我们希望它按照指定的标签去生成，这个时候我们可以使用`tag`属性来完成

<router-link :to="{name:'register'}" tag="div">我要去注册页面看地下</router-link>

##### `API`跳转路由 #####

只要是在Vue的创建的时候加载了`router`属性配置了VueRouter的，这个时候在任何子级当中都可以获取到这个`router`属性

this.$router.push({ 
        name:"register"
    });

上面的`$router`是路由管理对象，它对整个单页面程序的路由进行管理，它是**栈**的形式进行管理，所以上面的`push`操作相当于入栈操作，把一个新的路由地址推入到页面栈中  
如果想返回之前的页面，我们就要执行当前页面的出栈操作

this.$router.back();

同时还有一种跳转页面方式是`replace`

this.$router.replace({ 
        name:"register"
    }); //这种跳转方式是使用在敏感数据页面跳转

这一种跳转页面的方式是直接替换，它当前的页面栈的中的这个页拿出来，再推入一个新的页面，像一般的敏感数据会使用这一种方式（登陆，扫码提交等）

## 路由页面的传值 ##

路由传值的方式有两种，第一种是Query传值，第二种是prams传值

#### Query传值 ####

**在第一个页面**

toRegister(){ 
        this.$router.push({ 
            name:"register",
            query:{ 
                userName:"biaogege",
                age:18
            }
        });
    }

**第二个页面**

created(){ 
        console.log(this.$route.query);
    }

`<router-link>`也可以使用query来进行传值

<router-link :to="{name:'register',query:{age:22}}" >我要去注册页面看地下</router-link>

##### params传值 #####

这一种传值方式请同学们把它理解成我们之前所学习的`express`中的路径变量传值  
**第一个页面**

this.$router.push({ 
        name:"register",
        params:{ 
            userName:"biaogege",
            age:34
        }
    });

**第二个页面**

created(){ 
        //当前的路由对象
        console.log(this.$route.params);
    },

同时这里要注意，因为是路径变量，所以我们要在地址上面写上这个路径变量的名称

new Vue({ 
        el:"#app",
        router:new VueRouter({ 
            routes:[
                { 
                    path:"/register/:userName/:age",   //这里一定要写上路径变量的名称
                    component:register,
                    name:"register"
                }
            ]
        })
    })

这一种传值方式也可以使用`<router-link>`来进行，如下

<router-link :to="{name:'register',params:{userName:'biaogege',age:34}}" >我要去注册页面看地下</router-link>

### 嵌套路由 ###

<body>
        <div id="app">
            <router-view></router-view>
        </div>
        <template id="temp1">
            <div class="login-box">
                <h2>登陆页面</h2>
                <input type="text" placeholder="请输入用户名">
                <input type="password" placeholder="请输入密码">
                <button type="button" @click="$router.replace({name:'adminIndex'})">登陆</button>
            </div>
        </template>
        <template id="temp2">
            <div class="admin-box">
                <div class="header">欢迎登陆小米管理系统后台</div>
                <div class="left-menu">
                    <router-link :to="{name:'addStuInfo'}">新增学生</router-link>
                    <router-link :to="{name:'stuInfoList'}">学生列表</router-link>
                </div>
                <div class="right-content">
                    <router-view></router-view>
                </div>
            </div>
        </template>
        <template id="temp3">
            <div>
                <h2>新增学生的页面</h2>
                <p>
                    <input type="text" placeholder="请输入学号">
                </p>
                <p>
                    <input type="text" placeholder="请输入姓名">
                </p>
                <p>
                    <button type="button">提交数据</button>
                </p>
            </div>
        </template>
        <template id="temp4">
            <div>
                <h2>学生列表</h2>
                <table border="1" width="100%">
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                    </tr>
                    <tr><td>H20010001</td><td>张三</td></tr>
                    <tr><td>H20010002</td><td>张三2</td></tr>
                    <tr><td>H20010003</td><td>张三3</td></tr>
                    <tr><td>H20010004</td><td>张三4</td></tr>
                    <tr><td>H20010005</td><td>张三5</td></tr>
                </table>
            </div>
        </template>
    </body>
    <script src="./js/vue.min.js"></script>
    <script src="./js/vue-router.min.js"></script>
    <script>
        var login = { 
            template: "#temp1"
        };
        var adminIndex = { 
            template: "#temp2"
        };
        var addStuInfo = { 
            template:"#temp3"
        };
        var stuInfoList = { 
            template:"#temp4"
        };
        new Vue({ 
            el: "#app",
            router: new VueRouter({ 
                routes: [{ 
                    path: "/",
                    redirect: { 
                        name: "login"
                    }
                }, { 
                    path: "/login",
                    component: login,
                    name: "login"
                }, { 
                    path: "/adminIndex",
                    component: adminIndex,
                    name: "adminIndex",
                    //子路由，也叫嵌套路由
                    children:[
                        { 
                            path:"addStuInfo",
                            component:addStuInfo,
                            name:"addStuInfo"
                        },{ 
                            path:"stuInfoList",
                            component:stuInfoList,
                            name:"stuInfoList"
                        }
                    ]
                }]
            })
        });
    </script>

> 上面的是三栏式布面的布局的二级路由嵌套

下面的代码演示一下常见APP中的tab-bar这种形式的路由嵌套

<body>
        <div id="app">
            <router-view />
        </div>
        <template id="temp0">
            <div style="height: 100%;display: flex;flex-direction: column;">
                <div class="content-box">
                    <router-view />
                </div>
                <ul class="tab-bar">
                    <router-link tag="li" :to="{name:'movie'}" active-class="active">
                        <span class="iconfont icon-dianying"></span>
                        影片
                    </router-link>
                    <router-link tag="li" :to="{name:'cinema'}" active-class="active">
                        <span class="iconfont icon-yingyuana"></span>
                        影院
                    </router-link>
                    <router-link tag="li" :to="{name:'boxOffice'}" active-class="active">
                        <span class="iconfont icon-ranking"></span>
                        票房
                    </router-link>
                    <router-link tag="li" :to="{name:'myInfo'}" active-class="active">
                        <span class="iconfont icon-My"></span>
                        我的
                    </router-link>
                </ul>
            </div>
        </template>
        <template id="temp1">
            <div>
                <h2>这是里影片的信息页</h2>
                <button type="button" @click="$router.push({name:'detail'});">去某一个电影的详细信息页面</button>
            </div>
        </template>
        <template id="temp2">
            <div>
                <h2>这是里影院的信息页面</h2>
            </div>
        </template>
        <template id="temp3">
            <div>
                <h2>这是里票房的信息页面</h2>
            </div>
        </template>
        <template id="temp4">
            <div>
                <h2>这是里我的信息页面</h2>
            </div>
        </template>
        <template id="temp5">
            <div>
                <h1>这是某个电影的详细信息页面</h1>
            </div>
        </template>
    </body>
    <script src="./js/vue.min.js"></script>
    <script src="./js/vue-router.min.js"></script>
    <script>
        var indexPage = { 
            template: "#temp0"
        }
        var moviePage = { 
            template: "#temp1"
        };
        var cinemaPage = { 
            template: "#temp2"
        };
        var boxOfficePage = { 
            template: "#temp3"
        };
        var myInfoPage = { 
            template: "#temp4"
        }
        var detailPage = { 
            template:"#temp5"
        }
        new Vue({ 
            el: "#app",
            router: new VueRouter({ 
                routes: [{ 
                    path: "/index",
                    component: indexPage,
                    name: "index",
                    children:[
                        { 
                            path:"movie",
                            component:moviePage,
                            name:"movie"
                        },{ 
                            path:"cinema",
                            component:cinemaPage,
                            name:"cinema"
                        },{ 
                            path:"boxOffice",
                            component:boxOfficePage,
                            name:"boxOffice"
                        },{ 
                            path:"myInfo",
                            component:myInfoPage,
                            name:"myInfo"
                        }
                    ]
                },{ 
                    path:"/detail",
                    component:detailPage,
                    name:"detail"
                }]
            })
        })
    </script>