什么是路由
vue Router 是 Vue 官方提供的路由管理器, 他和 Vue 的核心深度集成, 让构建单页面应用变得非常简单, 通过根据不同的请求路径, 切换显示不同组件进行渲染页面.
基本路由使用
安装路由
注意: 使用路由首先要安装模块
NPM install vue-router
引入 vue-router.JS
- <script src="./node_modules/vue/dist/vue.js">
- </script>
- <script src="./node_modules/vue-router/dist/vue-router.js">
- </script>
案例
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title > 路由 </title>
- </head>
- <body>
- <div id="app">
- <div class="header">
- <h1 > 头部 </h1>
- </div>
- <div class="left">
- <p>
- <ul>
- <li><a href="#/foo">go foo</a></li>
- <li><a href="#/bar">do bar</a></li>
- <!-- 官方推荐
- 通过 router-link 标签默认会渲染出来 a 标签
- 其中通过 to 属性来指定跳转的链接, 不用带上 #号 -->
- <li>
- <router-link to="/foo">go foo</router-link>
- </li>
- <li>
- <router-link to="/bar">do bar</router-link>
- </li>
- </ul>
- </p>
- </div>
- <div class="main">
主页面
- <!-- 路由出口 -->
- <!-- 路由匹配到的组件将渲染在这里 -->
- <router-view></router-view>
- </div>
- </div>
- <script src="./node_modules/vue/dist/vue.js"></script>
- <script src="./node_modules/vue-router/dist/vue-router.js"></script>
- <script>
- // 1. 定义组件
- const Foo = {
- template: '<div> 我是 Foo 组件 </div>'
- }
- const Bar = {
- template: '<div> 我是 Bar 组件 </div>'
- }
- // 2. 配置路由表: 当点击指定的 url 的时候, 显示对应的组件
- const router = new VueRouter({
- routes: [
- { path: '/foo', component: Foo },
- { path: '/bar', component: Bar }
- ]
- })
- new Vue({
- el: '#app',
- data: {
- },
- router // router:router
- })
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3650139.html