vue路由的创建
2018-12-15 本文已影响0人
阿布朗迪
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script> <!-- 引入Vue -->
<script src="./vue-router.js"></script><!-- 引入Vue router-->
</head>
<body>
<div id="app">
<h1>Hello ,world</h1>
<p>
<!-- router-link 相当于a标签 -->
<!--to 要跳转的地址 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view><!-- 路由组件渲染的地方 -->
</div>
<script>
//1、定义（路由）组件
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
//2、定义路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
//3、创建路由实例
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
//4、创建和挂载根实例。
const app = new Vue({
router
}).$mount('#app')
// let vm = new Vue({
// el:"#app",
// data:{},
// components:{
// }
// });
</script>
</body>
</html>
