vue路由的使用

vue路由的使用

1.路由的使用步骤

• 1.html部分使用router-link组件定义导航，to属性指向路径url

     <router-link to="/home">导航主页<router-link>

• 2.html部分使用router-view来渲染路由内容

 
 <router-view></router-view>

• 3.定义组件

1).第一种方法，适用于内容较少的情况

 var Home = {
     template:"<h1>我是主页</h1>"
 }

2).第二种方法，适用于内容较多的情况

 在html内写：
 <template id="home">
         <h1>我是主页</h1>
         <ul>
             <li>我是主页</li>
         </ul>
 </template>

 在js内用id引入：
 var Home = {
     template:"#home"
 }

• 4.配置路由

 写法：这里是一个数组
     var routes = [
         {path:"/home", component:Home},
         {path:"*", redirect:"/home"}    // 路由重定向，*代表除配置外的路由，都指向redirect所对应的路径url
     ]

• 5.创建路由实例

     var router = new VueRouter({
         routes:routes,          //  router实例内提供了一个配置routes，参数值为routes(就是配置路由的名字，可以随便定义)
     })

• 6.创建vue实例并注入路由

     var vm = new Vue({
         el:"#app",
         router: router      // 注入路由 ==> router的值就是创建路由实例的那个变量，可以随便定义
         linkActiveClass:"on"    // 路由选中状态时，自定义按钮class名字
     })

2.路由的嵌套

2.1 - 路由的嵌套

a).在一个路由内部，使用children[]，嵌套子路由

    var User = {
        template:"#user"
    }
    var Login = {
        template:"<h4>登陆信息</h4>"
    }
    var Regist = {
        template:"<h4>注册信息</h4>"
    }


    ......
    {
        path:"/user", 
        component:User,
        children:[          // 路由嵌套
            {
                path:"login",       // 这里不要加斜杠了，因为已经是user的子路由
                component:Login
            },
            {
                path:"regist",
                component:Regist
            }
        ]
    }

b).同时html部分router-link，router-view也都需要嵌套到父路由的template内部
    ps:router-link 有一个tag属性，可以指定渲染后的标签名，不设置默认渲染成a标签

    <template id="user">
        <div>
            <h3>用户信息</h3>
            <ul>
                <router-link to="/user/login" tag="li">登陆</router-link>
                <router-link to="/user/regist" tag="li">注册</router-link>
            </ul>
            <router-view></router-view>
        </div>
    </template>

3.路由的参数传递

传参有两种形式：
a).查询字符串：login?name=tom&pws=123
    获取参数的值：{{$route.query}}

b).rest风格url：regist/yang/666
    获取参数的值：{{$route.params}}

    <router-link to="/user/login?name=tom&pwd=123" tag="li">登陆</router-link>
    <router-link to="/user/regist/yang/666" tag="li">注册</router-link>

    var Login = {
        template:"<h4>登陆信息{{$route.query}}，获取url：{{$route.path}}</h4>"
    }
    var Regist = {
        template:"<h4>注册信息{{$route.params}}，获取url：{{$route.path}}</h4>"
    }

    获取url：{{$route.path}}    

4.路由的实例方法

router.push()  添加路由功能上与<router-link>相同
router.replace()    替换路由，不产生历史记录

......
methods:{
    push:function(){
        router.push({path:"home"})
    },
    replace:function(){
        router.replace({path:"user"})
    }
}

5.路由配合动画

a).首先引入动画库，或者自己写好css3动画
    <link rel="stylesheet" href="animate.css">

b).然后配合transtion使用
    路由渲染是用router-view渲染的，那transtion组件只需要把router-view包起来就可以有动画了
    <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
        <router-view></router-view>
    </transition>