01-路由入门

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

<!-- dom -->
<div id="app">
    <!-- 写上导航 router-link 实际上会被渲染为a标签 -->
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
    <router-link to="/news">新闻中心</router-link>

    <!-- 路由出口 -->
    <router-view></router-view>
</div>

<script>
    // 定义组件
    // 首页
    const index = Vue.component('index', {
        template: '<h1>我是首页</h1>'
    })
    // 关于我们
    const about = Vue.component('about', {
        template: '<h1>我是关于我们</h1>'
    })
    // 新闻中心
    const news = Vue.component('news', {
        template: '<h1>我是新闻中心</h1>'
    })

    // 写路由配置
    const router = new VueRouter({
        // 写上路径path 和 组件component 之间的一一对应关系
        routes: [
            {path: '/', component: index},
            {path: '/about', component: about},
            {path: '/news', component: news},
        ]
    })

    // 创建vue实例
    new Vue({
        el: '#app',
        router
    })

</script>

02-路由嵌套

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

<!-- dom -->
<div id="app">
    <!-- 写上导航 router-link 实际上会被渲染为a标签 -->
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/news">新闻中心</router-link>

    <!-- 路由出口 -->
    <router-view></router-view>

</div>

<script>
    // 定义组件
    // 首页
    const index = Vue.component('index', {
        template: '<h1>我是首页</h1>'
    })
    // 关于我们
    const about = Vue.component('about', {
        template: `
                <div>
                    <p> 我们是一家历史悠久的公司  我们是一家历史悠久的公司
                            我们是一家历史悠久的公司  我们是一家历史悠久的公司</p>
                    <router-link to="/about/us">关于我们</router-link>
                    <router-link to="/about/company">关于公司</router-link>
                    <p>
                        <router-view />
                    </p>
                </div>
        `
    })
    // 新闻中心
    const news = Vue.component('news', {
        template: '<h1>我是新闻中心</h1>'
    })
    // 两个子组件
    const us = Vue.component('us', {
        template: '<h1>关于我们</h1>'
    })
    const company = Vue.component('company', {
        template: `<div>
                <h1>公司介绍</h1>
                <p class="text">公司一家成立了1000多年 历史悠久 </p>
            </div>`
    })

    // 写路由配置
    const router = new VueRouter({
        // 写上路径path 和 组件component 之间的一一对应关系
        routes: [
            {path: '/', component: index},
            {path: '/news', component: news},
            {
                path: '/about',
                component: about,
                children: [   // 子路由
                    {path: '/about/us', component: us},
                    {path: '/about/company', component: company}
                ]
            },
        ]
    })

    // 创建vue实例
    new Vue({
        el: '#app',
        router
    })

</script>