05-Vue路由

九. 路由

9.1 路由的介绍

1. 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
2. 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现
3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

9.2 路由的基本使用

！！！ 第一步要导包 ！！！


注意;vue-router.js 依赖于 vue.js 所以要注意顺序

<script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router-3.0.1.js" type="text/javascript" charset="utf-8"></script>

html代码:

<router-link to="/login" tag="button">登录</router-link>
<router-link to="/register" tag="button">注册</router-link>
<!-- vue-router 提供的占位符 显示相对应得组件 -->
<router-view></router-view>

router-link ,router-view 都是vue-router 提供的元素



两个跳转的组件：

var login ={
        // template:'<h1>登录组件---{{$route}}---{{$route}}</h1>',
        template:'<h1>登录组件</h1>',
        created(){
        // console.log(this.$route.params.name)
    }
}

var register ={
            template:'<h1>注册组件</h1>'
}

路由:

var routerObj=new VueRouter({
    //routers  --> 【路由匹配规则】
    routes:[
    //每一个路由匹配规则都是一个对象 都具有两个属性
    //path ：监听哪个路由的链接地址
    //component :表示如果路由匹配到的 path ，则展示component指定的组件
    //重定向:redirect  默认路径显示  路径为‘’的组件        
    {path:'/' ,redirect:'/login'},
    {path:'/login',component: login},
    {path:'/register' ,component:register}
    ]
})

vue代码:

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

9.3 路由的传值

9.3.1 query 传值

html代码:

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

组件:

var login ={
     template:'<h1>登录组件---{{$route.query.id}}---{{$route.query.name}}</h1>',
    created(){
          console.log(this.$route.query)
    }
}   

9.3.2 params 传值

html代码:

<router-link to="/login/18/zc" tag="button">登录</router-link>
<router-link to="/register" tag="button">注册</router-link>
<!-- vue-router 提供的占位符 显示相对应得组件 -->
<router-view></router-view>

vue代码:

var login ={
    template:'<h1>登录组件----{{$route.params.id}}---{{$route.params.name}}</h1>',
    created(){
        console.log(this.$route.params)
    }
}
//路由
var routerObj=new VueRouter({
    routes:[
        {path:'/' ,redirect:'/login'},
        {path:'/login/:id/:name',component: login},
        {path:'/register' ,component:register}
  ]
})

9.4 设置路由高光

css代码:

/* 实现路由高亮 */
.router-link-active{
    color: red;
    background: skyblue;
}
.myactive{
    color: blue;
    background: red;
}

路由:

var routerObj=new VueRouter({
    routes:[
        {path:'/' ,redirect:'/login'},
        {path:'/login/:id/:name',component: login},
        {path:'/register' ,component:register}
    ],
    //自定义一个active-class
    linkActiveClass:'myactive'
})

9.5 路由的嵌套

html代码:

<div id="app">
            <router-link to="/account" tag="button">account</router-link>
            <router-view></router-view>
        </div>
        
        <template id="tem">
            <div>
                这是你要看的组件
                <router-link to="/account/login" tag="button">登录</router-link>
                <router-link to="/account/register" tag="button">注册</router-link>
                <router-view></router-view>
            </div>
        </template>

vue代码:

var account={
    template:'#tem'
}
        //组件模块对象
var login ={
    template:'<h1>登录组件</h1>'
}
        
var register ={
    template:'<h1>注册组件</h1>'
}
        
        //创建一个路由对象
var routerObj=new VueRouter({
    //routers  --> 【路由匹配规则】
        routes:[
        {
        path:'/account',
        component:account,
        children:[
        {path:'login',component: login},
        {path:'register' ,component:register}
        ]
        }
    ]
})

var vm =new Vue({
            el:'#app',
            data:{},
            methods:{},
            //将路由注册到实例化对象中 用来监听url地址展示相对应的组件
            router:routerObj
})

9.6 命名路由

html代码:

 <div id="app">

    <router-view></router-view>
    <div class="container">
      <router-view name="left"></router-view>
      <router-view name="main"></router-view>
    </div>

  </div>

vue代码:

 var header = {
      template: '<h1 class="header">Header头部区域</h1>'
    }

    var leftBox = {
      template: '<h1 class="left">Left侧边栏区域</h1>'
    }

    var mainBox = {
      template: '<h1 class="main">mainBox主体区域</h1>'
    }
     var router = new VueRouter({
      routes: [
        /* { path: '/', component: header },
        { path: '/left', component: leftBox },
        { path: '/main', component: mainBox } */


        {
          path: '/', components: {
            'default': header,
            'left': leftBox,
            'main': mainBox
          }
        }
      ]
})
var vm =new Vue({
            el:'#app',
            data:{},
            methods:{},
            router:router
})