Vue 路由

什么是路由

路由是负责将进入的浏览器请求映射到特定的 组件 代码中。  即决定了由谁(组件)去响应客户端请求。

路由入门

<div id="app">
    <router-link to="/product">公司产品</router-link>
    <router-link to="/about">关于我们</router-link>
    <hr/>
    <router-view></router-view>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/vue-router.js"></script>
<script type="text/javascript">

    //>>1.定义首页
   var index = Vue.component("index",{
        template :"<h1>首页</h1>"
    });
    //>>2.公司产品
    var product = Vue.component("product",{
        template :"<h1>公司产品</h1>"
    });
    //>>3.关于我们
   var about = Vue.component("about",{
        template :"<h1>关于我们</h1>"
    });
    var router = new VueRouter({routes:[
        {path:"/",component:index},
        {path:"/about",component:about},
        {path:"/product",component:product},
    ]});

    var app = new Vue({
        el: "#app",
        router:router
    });
</script>

路由嵌套

组件中定义的路由叫做嵌套路由

<div id="app">
    <router-link to="/product">公司产品</router-link>
    <router-link to="/about">关于</router-link>
    <hr/>
    <router-view></router-view>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/vue-router.js"></script>
<script type="text/javascript">
    //>>1.定义首页
    var index = Vue.component("index",{
        template :"<h1>首页</h1>"
    });
   //>>2.公司产品
    var product = Vue.component("product",{
        template :"<h1>公司产品</h1>"
    });
    //>>3.关于我们
   var about = Vue.component("about",{
        template :`<div>
        <p>
            <router-link to='/about/'>关于我们</router-link>
            <router-link to='/about/company'>关于公司</router-link>
         </p>
         <p>
         <router-view></router-view>
         </p></div>`
    });

   var us = Vue.component("us",{
        template :"<h1>关于我们</h1>"
    });
   var company = Vue.component("us",{
        template :"<h1>关于公司</h1>"
    });
    var router = new VueRouter({
        routes:[
            {path:"/",component:index},
            {path:"/product",component:product},
            {path:"/about",component:about,
                children: [
                    {path : "/" , component :us},
                    {path : "company" , component :company},
                ]
            }
    ]});

    var app = new Vue({
        el: "#app",
        router:router
    });