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>
