vue-router基本概念及使用
index.html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 <script src="http://unpkg.com/vue/dist/vue.js"></script> 7 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 8 </head> 9 <body> 10 <div id="box"> 11 <p> 12 <!-- 使用 router-link 组件来导航. --> 13 <!-- 通过传入 `to` 属性指定链接. --> 14 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> 15 <router-link to="/home">home</router-link> 16 <router-link to="/news">news</router-link> 17 </p> 18 <!-- 路由出口 --> 19 <!-- 路由匹配到的组件将渲染在这里 --> 20 <router-view></router-view> 21 </div> 22 23 <script type="text/javascript"> 24 // 1. 定义(路由)组件。 25 const Home = { template: '<div>首页</div>' } 26 const News = { template: '<div>新闻</div>' } 27 28 // 2. 定义路由 29 // 每个路由应该映射一个组件 30 const routes = [ 31 { path: '/home', component: Home }, 32 { path: '/news', component: News } 33 ] 34 35 // 3. 创建 router 实例,然后传 `routes` 配置 36 const router = new VueRouter({ 37 routes // (缩写)相当于 routes: routes 38 }) 39 40 // 4. 创建和挂载根实例。 41 // 记得要通过 router 配置参数注入路由, 42 // 从而让整个应用都有路由功能 43 const app = new Vue({ 44 router 45 }).$mount('#box') 46 47 // 现在,应用已经启动了! 48 </script> 49 </body> 50 </html>
上面代码,我们应该设置打开浏览器就默认调整到 “首页”,所以需要把根路由/
重定向到/home
。
修改路由配置:
const routes = [ { path: '/', redirect: '/home' }, { path: '/home', component: Home }, { path: '/news', component: News } ]
1:建立路由组件
2:建立映射
3:建立路由实例
4:使用router-link建立路由导航
5:使用router-view建立路由出口
优质内容筛选与推荐>>