6. vue-router的使用
本节内容
一、
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) // 1. 定义 (路由) 组件。 // 下面两个组件可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器， // 或者，只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例，然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app') // 现在，应用已经启动了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { background-color: green; } </style> </head> <body> <div id="app"> <App></App> </div> </body> <script src="../vue.js"></script> <script src="../axios.js"></script> <script src="../vue-router.js"></script> <script> let Person = { data() { return { msg: '我是person组件', } }, template: ` <div class="c1"> <h3 style="color:#ff0000">{{msg}}</h3> </div> `, } let Home = { data() { return { msg: '我是home组件', header_num: 99, } }, // 写组件的html标签的地方 template: ` <div class="c1"> <h3 style="color:#ff0000">{{msg}}</h3> </div> ` , }; let App = { data() { return { app_num: 80, } }, //<router-link to=""></router-link> //<a href=""></a> template: ` <div class="app"> <h2>我是app组件</h2> <router-link to="/home">首页</router-link> <router-link to="/person">个人中心</router-link> <router-view></router-view> </div> ` , } const routes = [ {path: '/home', component: Home}, {path: '/person', component: Person} ] const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }) let vm = new Vue({ el: '#app', // data:{} data() { return { // ganmao:'xxx', } }, router, components: { App, }, }) </script> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <App></App> </div> </body> <script src="js/vue.js"></script> <!--<script src="js/vue-router.js"></script>--> <!-- 注意：测试的时候可能因为你的vue或者vue-router文件有些版本上的冲突问题，导致router-link不能生成a标签，所有建议用下面这两个进行测试，然后再找对应的版本存到本地 --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script> // import VueRouter from 'node_modules/vue-router/dist/vue-router' Vue.use(VueRouter); let Home = { data(){ return { 'msg':'hello home', } }, template:` <div class="home"> {{msg}} </div> ` }; let Course = { data(){ return { 'msg':'hello course', } }, template:` <div class="course"> {{msg}} </div> ` }; let App = { data(){ return {} }, template:` <div> <router-link to="/home">首页</router-link> <router-link to="/course">课程详情页</router-link> <router-view></router-view> </div> ` }; let router = new VueRouter({ // mode:'history', routes:[ // {path:'/',redirect}, {path:'/home',component:Home}, {path:'/course',component:Course}, ] }); let vm = new Vue({ el:'#app', router, data(){ return { } }, // template:`<App></App>`, components:{ App, } }) </script> </html>
