vue-router(1)
阿新 • • 發佈:2018-07-30
lint convert efault port nts -s bsp path ini
構建項目
- vue init webpack vue-router-demo
- cnpm install
使用vue-router
1. 在src文件夾下 -- 新建router文件夾 -- 新建index.js
2. 在index.js中引入vue、vue-router
- import Vue from ‘vue‘
- import VueRouter from ‘vue-router‘
- Vue.use(VueRouter)
3. 在index.js中聲明一個VueRouter實例
- export default new VueRouter({ routes: [ { path:‘/home‘, component: Home } ] })
4. 在main.js中引入router、並在new Vue({}) 實例中添加router
- import router from ‘./router‘
- new Vue({router})
5. 通過<router-view></router-view>顯示
6. router-link
- <router-link to="/home">Home</router-link>
- <router-link :to="{path:‘/home‘}">Home</router-link>
- <router-link :to="{name:‘home‘}">Home</router-link>
- <router-link :to="{name:‘home‘}" tag="li">Home</router-link> 把<router-link></router-link> 渲染成li標簽
eg:
- App.vue
<template> <div id="app"> <div>我是APP</div> <a href="#/home">Home</a> // 這裏的地址要寫 #/ 或者給index.js中的VueRouter實例配置一個mode字段 mode:‘history‘(這個字段會刷新頁面)<a href="#/about">About</a> <li><router-link to="/home">Home</router-link></li> <li><router-link to="/doc">Doc</router-link></li> <li><router-link to="/about">About</router-link></li> <router-view></router-view> </div> </template> <script> export default { name: ‘App‘ } </script>
eg:
- index.js
import Vue from ‘vue‘ import VueRouter from ‘vue-router‘ import Home from ‘../components/home.vue‘ import About from ‘../components/about.vue‘ Vue.use(VueRouter) export default new VueRouter({ routes: [ { path:‘/home‘, name: ‘home‘, // 如果路由很深,用name會方便一些 component: Home }, { path:‘/about‘, component: About } ] })
eg:
- main.js
import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: ‘#app‘, router, components: { App }, template: ‘<App/>‘ })
eg:
- home.js
<template> <div>我是{{title}}</div> </template> <script> import Home from ‘../components/home‘ export default { data() { return { title: ‘HOME‘ } } } </script>
eg:
- about.js
<template> <div>我是{{title}}</div> </template> <script> import About from ‘../components/about‘ export default { data() { return { title: ‘ABOUT‘ } } } </script>
vue-router(1)