路由的基本使用

一、路由的基本使用

①安装vue-router路由模块

②创建一个路由对象：

var routerObj = new VueRouter({
  routes: [ //每个路由匹配规则，都是一个对象（必须要有两个属性）
    { path: '/login', component: login }, // 属性1 是path，表示监听哪个路由链接地址，属性2是 是component，表示如果路由是前面匹配到的path，则展示component属性对应的那个组件
    { path: '/register', component: register }
  ],
  linkActiveClass: 'myactive';//默认类名是router-link-exact-active router-link-active，这个可以改变指定类名
})

③写好相关组件

④注册路由

routers:routerObj ;

⑤在HTML上写入展示标签，<router-view></router-view>，跳转类目<a href="#/login">登录</a> //此处需加#号，为解决#号这个问题，vue-router有特设的一个标签

<router-link to="/register" tag="span">注册<router-link>

完整代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.js"></script>
  <style>
    .myActive{
      font-weight: bold;
      color: pink;
      font-size: 25px;
    }
    .v-enter,.v-leave-to{
      opacity: 0;
      transform: translateX(140px);
    }
    .v-enter-active,.v-leave-active{
      transition: all 0.8s ease;
    }
  </style>
</head>
<body>
    <div id="app">
    
    <a href="#/login">登录</a>
    <!-- <a href="#/register">注册</a> -->
    <!--默认渲染为a标签,tag可改变-->
    <!-- <router-link to="/login" tag="span">登录</router-link> -->
    <router-link to="/register">注册</router-link>
    <transition mode="out-in"><!--加个过渡模式-->
      <router-view></router-view><!--注意别写错了-->
    </transition>
  </div>

  <script>

    var login = {
      template: '<h1>登录组件</h1>'
    }

    var register = {
      template: '<h1>注册组件</h1>'
    }
    
    var routerObj = new VueRouter({
      routes:[
        { path: '/', redirect: 'login' },//redirect重定向
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      // linkActiveClass:'myActive'
    })

    var vm = new Vue({
      el:'#app',
      data:{},
      methods:{},
      router: routerObj
    })

  </script>
</body>
</html>
View Code

 

二、使用$route.query的方式传递路由的参数

第一种传递方式：使用query

 <router-link to="/login?id=10&name=lxf">登录</router-link>

使用：this.$route.query.id（函数下），内容下可以去掉this. <h1>{{$route.query.id}}</h1>

第二种传递方式：使用params

<router-link to="/login/12/lxf">登录</router-link>
template:'<h1>登录--{{$route.params.id}}</h1>'

 

三、路由的嵌套

  <div id="app">
    <router-link to="/account">account</router-link>
    <router-view></router-view>
  </div>

  <template id="temp">
    <div>
      <h1>这是Account组件</h1>
      <router-link to="/account/login">登录</router-link>
      <router-link to="/account/register">注册</router-link>
      <router-view></router-view>
    </div>
  </template>
    var account = {
      template:'#temp'
    }
    var login = {
      template:'<h3>登录组件</h3>'
    }
    var register = {
      template:'<h3>注册组件</h3>'
    }

    var router = new VueRouter({
      routes:[
        { 
          path:'/account',
          component:account,
          // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
          children:[
            { path:'login', component: login},
            { path:'register', component: register}
          ]

        }
      ]
    })

    var vm = new Vue({
      el:'#app',
      data:{},
      methods:{},
      router
    })

 

四、路由-使用命名视图实现经典布局

    <router-view></router-view>
    <div class="container">  
      <router-view name="left"></router-view><!--给路由视图起对应名字-->
      <router-view name="main"></router-view>
    </div>
    var router = new VueRouter({
      routes:[
        {
          path:'/',
          components:{//components是重点
            'default':header,//设置默认的路由
            'left':left,//名字为字符串
            'main':main
          }
        }
      ]
    })

　　

posted @ 2018-07-25 16:28  丶夏天的风暖暖的  阅读(146)  评论(0)  编辑  收藏  举报