安装:npm install vue-router
步骤:
1. 引入vue、vue-router 并注册为插件
2. 新建路由(路径和组件的映射关系)
3. 新建路由器
4. 将路由注册给路由器
5. 将路由器注册给Vue
6. 为路由组件进行占位(内容显示在哪,占位就写在哪)
相关代码:
// 1. 引入vue、vue-router 并注册为插件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 2. 引入组件并新建路由(路径和组件的映射关系)
import nameA from './components/A'
import nameB from './components/B'
import nameC from './components/C'
const routes=[
{path: '/a',component:nameA},
{path: '/b',component:nameB},
{path: '/c',component:nameC},
//重定向
{path: '/',redirect:'a'}
]
//3. 新建路由器
const router = new VueRouter({
//4. 将路由注册给路由器
routes //ES6语法,相当于routes:routes 前者不可改变,后者为路由变量名
})
//5.将路由器注册给Vue
new Vue({
el: '#app',
components: { App },
template: '<App/>',
router //ES6语法,相当于router:router 前者不可改变,后者为路由器变量名
})
<div id="app">
<!--<a href="/#/a">A</a>-->
<!--<a href="/#/b">B</a>-->
<!--<a href="/#/c">C</a>-->
<router-link to="/a">A</router-link>
<router-link to="/b">B</router-link>
<router-link to="/c">C</router-link>
<!--6. 为路由组件进行占位-->
<router-view></router-view>
</div>
注:
嵌套的路由路径不能写 / 会被当作根路径处理
< router-link >基于全局 路径要写完整
注:
注:
router为路由器
route为路由
redirect重定向后跟字符串
path为地址栏路径,component后为组件名