05-Vue route

IX. Routing

Routing 9.1 Introduction

1. For the average website, all hyperlinks are URL addresses, URL addresses corresponding to all of the resources on the corresponding server
2. For single-page applications, mainly realized by switching between different pages in the URL hash (# number), while, a hash features: HTTP request does not contain relevant content hash; therefore, a single page of the application the main page jump with hash achieve
3. In the single-page applications in this manner to switch the page by changing the hash, called the front end of the route (route different from the rear end)

9.2 Use of basic routing

! ! ! The first step to guide package ! ! !


Note; vue-router.js to be noted that it depends on the order 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 code:

<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 element vue-router are provided



two jump components:

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

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

routing:

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

vue Code:

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

9.3 Routing of traditional values

9.3.1 query by value

html code:

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

Components:

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

9.3.2 params by value

html code:

<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 Code:

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}
  ]
})

Routing high light provided 9.4

css code:

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

routing:

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

9.5 routing nesting

html code:

<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 Code:

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 Naming route

html code:

 <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 Code:

 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
})