Vue路由对象

vue路由基础应用

Vue.js 路由允许我们通过不同的 URL 访问不同的组件。
通过 Vue路由对象可以实现多视图的单页Web应用，它和vue一样都需要引入才能使用

比如下面这个例子：在很多网站，比如淘宝，京东登陆界面都是这样

在之前的学习中，我们使用锚点的方法来实现该功能，但是利用锚点来完成的话，代码的重复利用率较低，所以接下来我们可以利用vue路由切换来实现。

a标签实现

<div id="app">
        <a href="#/password">密码登录</a>
        
        <a href="#/code">验证码登录</a>
        <div style="margin-top: 20px;">
            <router-view></router-view>
             <!-- route-view标签是vue-router提供的元素,它是专门用来当做占位符的  
             将来路由规则匹配到组件的时候会将组件展示到这个router-view 中去 -->
        </div>       
    </div>
    <template id='tem1'>
        <div>
            <input type="text" placeholder='会员名/邮箱/手机号'><br>
            <input type="text" placeholder='请输入密码'>
        </div>
    </template>
    <template id='tem2'>
        <div>
            <input type="text" placeholder='请输入手机号'><br>
            <input type="text" placeholder='请输入验证码'>
        </div>
    </template>
    <script>
        var password = {
            template:'#tem1'
        }
        var code1 = {
            template:'#tem2'
        }
        const router = new VueRouter({
            routes:[
                {path:'/password',component:password},
                {path:'/code',component:code1}
            ]
        })
        new Vue({
            el:'#app',
            components:{
                password,code1
            },
            router:router
        })       
    </script>

使用a标签进行路由跳转时，需要在定义的路径前面加上#，这代表从当前目录进行跟踪，不加的话会跳转到根目录进行检索

可以看到通过点击，上面的url地址栏中也发生了变化。

router-link

router-link是vue-router中的一个标签，它默认渲染为一个a标签，但是也可以通过tag属性将默认标签改变为其他标签，并且在写跳转路由时不需要手动添加#，它会自动默认添加

<router-link to="/password" tag="h1">密码登录</router-link>
<router-link to="/code">验证码登录</router-link>
            <router-view></router-view>

改变激活路由的样式

我们可以看到当我们选中一个路由时，会自动给其添加类名router-link-exact-active和router-link-active。这代表着当前属于激活状态。
我们可以给这个类添加属性来改变样式

.router-link-active{
            color:red
        }

redirect

在nodejs的图书管理系统中，我们学习了redirect重定向，来使执行完添加，修改操作后，自动跳转会主页面。在vue-router中也有这样的方法。在上面的代码中进行添加

        <router-link to="/password">密码登录</router-link>
        <router-link to="/code">验证码登录</router-link>
        <router-link to="/code1">重定向1</router-link>
        <router-link to="">重定向2</router-link>
            <router-view></router-view>

routes:[
                {path:'/password',component:password},
                {path:'/code',component:code1},
                {path:'/code1',redirect:'/password'},
                {path:'/',redirect:'/code'}
            ]

可以看到虽然我们点击的是路径为/code1对应的路由，但地址栏显示的却是/password对应的路由地址。这就说明redirect方法可以把当前路由对应到另一个路由。

在进网站时，应当在网站名后面加上/index.html才算是进入主页面，比如百度，只需要输入网站名就可以进入主页面，该方法就可以实现这个效果

路由传递数据

使用/password?id=10传递数据，可以看到通过$route.query来获取路由传递的值

<div id="app">          
        <router-link to="/password?id=10" tag="span">密码登录</router-link>
        <router-link to="/code" tag="span">验证码登录</router-link>
            <router-view></router-view>           
    </div>
    <template id='tem1'>
        <div>
            <h1>我是组件1===={{$route.query}}</h1>
        </div>
    </template>
    <template id='tem2'>
        <div>
            <h1>我是组件2</h1>
        </div>
    </template>
    <script>
        var password = {
            template:'#tem1',
            created() {
                console.log(this.$route);
            },
        }
        var code1 = {
            template:'#tem2'
        }
        const router = new VueRouter({
            routes:[
                {path:'/password',component:password},
                {path:'/code',component:code1},
            ]
        })
        new Vue({
            el:'#app',
            data:{
                flag:false
            },
            components:{
                password,code1
            },
            router:router
        })       
    </script>

通过/password/12/Danny来传递数据时，可以用$route.params来获取数据

<router-link to="/password/12/Danny" tag="span">密码登录</router-link>

<template id='tem1'>
        <div>
            <h1>我是组件1===={{$route.params}}</h1>
        </div>
    </template>

routes:[
                {path:'/password/:id/:name',component:password},
                {path:'/code',component:code1},
            ]

路由嵌套

<div id="app">
        <router-link to="/total">total</router-link>
        <router-view></router-view>
    </div>
    <template id='tem'>
        <div>
            <h1>这是total组件</h1>
            <router-link to="/total/login">登录</router-link>
            <router-link to="/total/register">注册</router-link>
            <router-view></router-view>
        </div>
    </template>
    <script>
        var total = {
            template:'#tem'            
        }
        var login={
            template:'<h1>登录的组件显示</h1>'
        }
        var register={
            template:'<h1>注册的组件显示</h1>'
        }
        const routerobj = new VueRouter({
            routes:[
                {
                    path:'/total',
                    component:total,
                    //使用children属性实现子路由，同时子路由path前不要带 / 否则永远以根路由开始请求, 这样不方便我们调用渲染数据
                    children:[
                        {path:'login',component:login},
                        {path:'register',component:register}
                    ]
                    }
            ]
        })
        new Vue({
            el:'#app',
            router:routerobj
        })
    </script>

在父路由中添加children来设置子路由

总结

定义的router和组件一样都要放到vue实例里面才能生效，并且必须要有route-view标签才能把路由规则对应的组件渲染到页面上