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>