主要操作技能：
官网
https://router.vuejs.org/
中文网
https://router.vuejs.org/zh/guide/
vue路由配置：
1.安装
cnpm install vue-router --save /npm install vue-router --save
2.引入并Vue.use(VueRouter) (在main.js写)
import VueRouter from 'vue-router'
Vue.use(VueRouter);
3.配置路由
(1)创建组件，引入组件
import Home from './components/Home.vue' //1.引入组件
import News from './components/News.vue' //1.引入组件
(2)定义路由
const routes = [{
path: '/home',
component: Home
},
{
path: '/news',
component: News
}
]
(3)实例化VueRouter
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
(4)挂载
new Vue({
el: '#app',
router,
render: h => h(App)
})
(5)将<router-view></router-view>放在根组件的模板App.vue中
编写代码：
Home.vue
<template>
<!--所以的内容多要被根节点包含起来 -->
<div id="home">
<h3>首页组件</h3><br />
</div>
</template>
<script>
export default {
data() { //数据
return {
msg: 'I am home component!'
}
}
}
</script>News.vue
<template>
<div id="news">
<h2>我是新闻组件</h2><br />
</div>
</template>
<script>
export default {
data() {
return {
msg: '我是新闻组件哦!'
}
}
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
//0.引入vue-router
import VueRouter from 'vue-router'
Vue.use(VueRouter);
Vue.use(VueResource);
//1.创建组件
import Home from './components/Home.vue' //1.引入组件
import News from './components/News.vue' //1.引入组件
//2.配置路由
const routes = [{
path: '/home',
component: Home
},
{
path: '/news',
component: News
},
{ //默认跳转路由
path: '*',
redirect: '/home'
}
]
//3.实例化VueRouter
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
//4.挂载路由
new Vue({
el: '#app',
router,
render: h => h(App)
})App.vue
<template>
<div id="app">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link><br />
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
data() { //业务逻辑的数据
return {
msg: 'hello'
}
}
}
</script>效果:
单击首页
单击新闻
默认跳转路由:
