1.引入插件vue-router
<script type="text/javascript" src="./vue-router/dist/vue-router.js"></script>
2.使用vueRouter
Vue.use(VueRouter);
3.创建路由对象
var router = new VueRouter({
// 4.配置路由对象
routes:[
// 路由匹配的规则
{
path:'/login',
component:Login
},
{
path:'/register',
component:Register
}
]
});
4.声明组件
var Login = {
template:`<div>我是登录页面</div>`
};
var Register = {
template:`<div>我是注册页面</div>`
};
5.抛出全局组件
var App = {
template:`
<div>
<!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
<router-link to = '/login'>登录</router-link>
<router-link to = '/register'>注册</router-link>
<!--路由组件的出口-->
<router-view></router-view>
</div>
`
}
6.将配置好的路由对象放到实例化对象中
new Vue({
el:'#app',
router:router,
template:`<App />`,
components:{
App
}
});
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<!-- 1.先引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 2.引包 引入 核心的插件vue-router -->
<script type="text/javascript" src="./vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 2.让vue使用该VueRouter创建
Vue.use(VueRouter);
//声明组件
var Login = {
template:`<div>我是登录页面</div>`
};
var Register = {
template:`<div>我是注册页面</div>`
};
// 3.创建路由对象
var router = new VueRouter({
// 4.配置路由对象
routes:[
// 路由匹配的规则
{
path:'/login',
component:Login
},
{
path:'/register',
component:Register
}
]
});
// 抛出两个全局的组件 router-link router-view
var App = {
template:`
<div>
<!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
<router-link to = '/login'>登录</router-link>
<router-link to = '/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>
效果：
