2018-09-26 路由

路由.切换页面

<div id="app">
            <router-link to='/home'>首页</router-link>
            <router-link to='/user'>分页</router-link>
            <router-view></router-view>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var Home={
                template:`
                <h1>这是首页</h1>
                `
            }
            var User={
                template:`
                <h1>这是分页</h1>
                `
            }
            const routes=[
                {path:'/',component:Home},
                {path:'/home',component:Home},
                {path:'/user',component:User}
            ]
            const router=new VueRouter({
                routes:routes,
//              linkActiveClass:'active'
            })
            new Vue({
                el:'#app',
                router:router
            })
        </script>

2.路由嵌套

<div id="app">
            <router-link to='/home'>首尔</router-link>
            <router-link to='/user'>分页</router-link>
            <router-view></router-view>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var Home={
                template:`
                <h1>这是首页</h1>
                `
            }
            var User={
                template:`
                <div>
                <h1>这是分页</h1>
                <ul>
                <li>
                <router-link to='/user/zhuce'>登录</router-link>
                </li>
                <li>
                <router-link to='/user/denglu'>注册</router-link>
                </li>
                </ul>
                <router-view></router-view>
                </div>
                `
            }
            
            var Zhu={
                template:`
                <h2>登录</h2>
                `
            }
            var Deng={
                template:`
                <h2>注册</h2>
                `
            }
            const routes=[
                {path:'/',component:Home},
                {path:'/home',component:Home},
                {
                    path:'/user',
                    component:User,
                    children:[
                        {path:'zhuce',component:Zhu},
                        {path:'denglu',component:Deng}
                    ]
                }
            ]
            const router=new VueRouter({
                routes:routes,
//              linkActiveClass:'active'
            })
            new Vue({
                el:'#app',
                router:router
            })
        </script>