路由:根据不同的url地址展示不同的内容或者页面
引入vue 和router
这个链接是引入链接 点击即可跳转
https://www.runoob.com/vue2/vue-routing.html
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<!-- 4.使用路由 outer-link -->
<router-link to="/home">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/regist">注册</router-link>
<!-- 5.定义路由视图 -->
<router-view></router-view>
</div>
</body>
<script>
//2.书写页面
let home = { template: ` <div><h1>home</h1></div> ` }
let login = { template: ` <div><h1>login</h1></div> ` }
let regist = { template: ` <div><h1>regist</h1></div> ` }
//1.使用路由 配置路由 component组件
let router = new VueRouter({
routes: [
{ path: "/home", component: home },
{ path: "/login", component: login },
{ path: "/regist", component: regist },
]
})
//3.可插拔
new Vue({
el: "#app",
router //注册路由
})
</script>