vue路由及案例

前端路由和后端路由的区别:

  • 后端路由:对应相应服务器的资源的url就叫后端路由,这种路由请求会调用服务器资源
  • 前端路由:只在浏览器跳转,不涉及服务器请求。通过hash(#)来实现的。http请求中不会包含hash相关的内容。

路由的基本使用

  1. 导入vue-router.js
  2. 建组件模板 ( template里只能有一组根标签)
    var login = {template:'

    这是一个登陆组件

    '}
  3. 建路由实例对象
    var vueroute = new VueRouter({ routes:[{path:'/login',component:login},{path:'/register',component:register}]})
  4. 将路由实例对象挂载到vue实例上
  5. 在html结构上加个容器
  6. 加路由切换 router-link (tag属性表示渲染成什么标签)
    登录
    注册

给路由传参

方法一:
1.router-link 标签里to 属性后加?id=10&name=ww
2.使用this.$route.query.id 来获取传过来的参数
方法二:
1.路由实例化时 path改为/login/:id/:name
2.router-link 标签里to属性里加/10/ww
3.通过this.$route.param.id来获得数据

给路由切换加动画效果

1.用transition标签将router-view包裹,mode属性out-in表示先出后进

2.定义样式.v-enter,.v-leave-to;.v-enter-active,.v-leave-active

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewreport" content="width=device-width initial-scan=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>vue-route练习</title>
        <script src="./vue.js"></script>
        <script src="./vue-router.js"></script>
        <style >
            .router-link-active{  
                color:red;
                font-size: 50px;
            }
            .myactive{
                color:green;
                font-size: 50px;
            }
            .v-enter,.v-leave-to{
                opacity: 0;
                transform: translateX(200px);
            }
            .v-enter-active,.v-leave-active{
                transition: all 1s ease;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- <a href="#/login">登录</a>
            <a href="#/register">注册</a> -->

            <!-- router-link 也是vue-router 提供的标签,默认渲染为<a>标签,如果要渲染成别的,则用属性tag="span" -->
            <!-- 使用router-link,在选中某个路由时,会自动添加样式 "router-link-exact-active router-link-active"  -->
            <!-- 这个样式是router-link默认的active class,如果要修改,需要通过路由的构造选项linkActiveClass来全局配置 -->
            <router-link to="/login" tag="span">登录</router-link>
            <router-link to="/register">注册</router-link>
            <!-- 这个vue-router提供的标签,一个占位符,将路由规则匹配到的组件放到这里 -->
            <!-- 给显示的组件设置动画,用transition包裹,然后设置样式 -->
            <transition mode="out-in">
                <router-view></router-view>
            </transition>
            
        </div>

        <script>
            
            var login = {
                template:'

这是一个登陆组件

'
} var register = { template:'

这是一个注册组件

'
} // Vue.component('login',{ // template: login // }) var vuerouter = new VueRouter({ //定义配置对象 routes: [// 这个表示路由匹配规则 //每个路由规则都是一个对象,有两个属性:path (表示监听哪个路由地址) component (展示对应的组件, //对应的值必须是组件模板对象,不能是通过Vue.component注册的组件名称) //{path:'/' ,component : login}, //这种写法不推荐 {path:'/' ,redirect : '/login'}, //使用重定向功能 {path: '/login',component: login}, //这里的login应该是组件模板对象 不能加引号 {path: '/register',component: register} ], linkActiveClass: 'myactive' }) var vm = new Vue({ el:"#app", data:{}, methods:{}, router:vuerouter //将路由规则对象注册到vm实例上,用来监听url的变化 }) </script> </body> </html>

你可能感兴趣的:(vue,vue)