Vue命名路由

Vue命名路由

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <!-- 1.先引入vue.js -->
    <script src="js/vue.js"></script>
    <!-- 2.引包 引入 核心的插件vue-router -->
    <script src="node_modules/vue-router/dist/vue-router.js"></script></script>
    <script type="text/javascript">

        // 2.让vue使用该VueRouter创建 如果vue是一个局部作用域的对象 那么必须Vue.use(VueRouter);
        // Vue.use(VueRouter);


        //声明组件
        var Login  = {
            template:`<h1>我是登录页面</h1>`
        };
        var Register  = {
            template:`<h1>我是注册页面</h1>`
        };
        // 3.创建路由对象

        var router = new VueRouter({
            // 4.配置路由对象
            routes:[
                // 路由匹配的规则
                {
                    path:'/login',
                    name:'login',
                    component:Login
                },
                {
                    path:'/register',
                    name:'register',
                    component:Register
                }
            ]
        });

        // 抛出两个全局的组件 router-link  router-view
        
        var App = {
            template:`
                <div>
                    <!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
                    <router-link :to = "{name:'login'}">登录</router-link>
                    <router-link :to = "{name:'register'}">注册</router-link>
                    
                    <!--路由组件的出口-->
                    <router-view></router-view>
                </div>
            `
        }

        // Cannot read property 'matched' of undefined
        // 5.将配置好的路由对象关联到vue实例化对象中
        new Vue({
            el:'#app',
            router:router,
            template:`<App />`,
            components:{
                App
            }
        });
    </script>
    
</body>
</html>

 

 

 

 

posted @ 2019-11-19 20:29  Mr▪小zhou  阅读(185)  评论(0)  编辑  收藏  举报