vue第六天

vue 路由

路由通俗解释：根据不同url地址，出现不同效果，一般是用来写SPA应用，单页面应用

这里用的是vue-router 0.7.13版本
一个路由的基本结构跟用法：
引入路由js文件：

<script src="js/vue.js"></script>

<script src="js/vue-router.js"></script>

html:

    <a v-link="{path:'/home'}">主页</a>    //跳转链接,v-link里面也是写json 
    <a v-link="{path:'/news'}">新闻</a>           
    
    <router-view></router-view>           //展示内容

js:

//1. 准备一个根组件
    var App=Vue.extend();

//2. Home News组件都准备
    var Home=Vue.extend({
        template:'<h3>我是主页</h3>'
    });

    var News=Vue.extend({
        template:'<h3>我是新闻</h3>'
    });

//3. 准备路由
    var router=new VueRouter();

//4. 关联
    router.map({
        'home':{
            component:Home
        },
        'news':{
            component:News
        }
    });

//5. 启动路由:#box是作用范围
    router.start(App,'#box');

//6.跳转
    router.redirect({
        '/':'/home'
    });

---

对于多层路由如下：
html：

<div id="box">
        <ul>
            <li>
                <a v-link="{path:'/home'}">主页</a>
            </li>
            <li>
                <a v-link="{path:'/news'}">新闻</a>
            </li>
        </ul>
        <div>
            <router-view></router-view>
        </div>    
    </div>     
    <template id="home">
        <h3>我是主页</h3>
        <div>
            <a v-link="{path:'/home/login/zns'}">登录</a>
            <a v-link="{path:'/home/reg/strive'}">注册</a>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </template>
    <template id="news">
        <h3>我是新闻</h3>
        <div>
            <a v-link="{path:'/news/detail/001'}">新闻001</a>
            <a v-link="{path:'/news/detail/002'}">新闻002</a>
        </div>
        <router-view></router-view>
    </template>
    <template id="detail">
        {{$route.params | json}}//当前参数
        <br>
        {{$route.path}}//当前路径
        <br>
        {{$route.query | json}}//数据
    </template>
    
    

js：

//1. 准备一个根组件
var App=Vue.extend();

//2. Home News组件都准备
var Home=Vue.extend({
    template:'#home'
}); 
var News=Vue.extend({
    template:'#news'
}); 
var Detail=Vue.extend({
    template:'#detail'
});

//3. 准备路由
var router=new VueRouter();

//4. 关联
router.map({
    'home':{
        component:Home,
        subRoutes:{
            '/login/:name':{
                component:{
                    template:'<strong>我是登录信息 {{$route.params | json}}</strong>'
                }
            },
            'reg':{
                component:{
                    template:'<strong>我是注册信息</strong>'
                }
            }
        }
    },
    'news':{
        component:News,
        subRoutes:{
            '/detail/:id':{
                component:Detail
            }
        }
    }
});

//5. 启动路由
router.start(App,'#box');

//6. 跳转
router.redirect({
    '/':'home'
});