一、路由
1.1、路由是什么
vue的路由使用在SPA应用中的组件跳转,相当于多页面的 a标签。
详情参考官网vue路由
1.2、使用路由
1.2.1、引入js文件的方式
- 引入vue-router.js文件
<script src="js/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
- 定义若干个组件
let goodlist = {
template:"<div>商品列表</div>"
}
let goodsdetail = {
template:"<div>商品详情</div>"
}
3、定义路由对象
- 路由配置(json数组)
let routes = [
{path:'/goodslist',component:goodlist},
{path:'/goodsdetail',component:goodsdetail}
];
- 实例化一个vueRouter对象
let router = new VueRouter({
routes:routes
});
-
挂载vueRouter对象
把vueRouter对象,挂载(注册)到vue对象里
let vm = new Vue({
el:"#app",
router
});
- 跳转代码(声明式)
<router-link to='/goodslist'>商品列表</router-link>
1.2.2、模块化的方式
脚手架安装时,会默认安装vue-router。
- 安装
npm i vue-router -S
-
定义组件(单文件组件)
-
创建vueRouter对象,并做路由配置和引入
3.1)创建vueRouter对象(定义路由对象,配置路由)
在src目录下新建文件夹router,再新建index.js(文件名任意)
import Vue from 'vue'
//1. 引入路由包
import Router from 'vue-router'
//2. 安装插件包到Vue上,
Vue.use(Router)
//3. 路由配置
let routes = [
{
path: '/',
component: HelloWorld
},
{
path: '/home',
component: Home
}, //route 一条路由的配置
]
//4.路由实例
let router = new Router({ //插件路由对象
// routes:routes
routes,
});
//5.导出路由实例,让它去控制vue根
export default router
3.2)在main.js中引入vueRouter对象,并植入到根属性
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
- 展示
<router-view>展示区</router-view>
- 跳转
5.1)声明式跳转
<router-link to="/home">声明式跳转</router-link>
<router-link to="/home" tag='li' active-class='类名' >声明式跳转</router-link>
属性说明:
to:跳转的路径
tag='li' 指定编译后的标签,默认是 a 标签。
active-class='类名' 指定激活后的样式 模糊匹配
exact-active-class='类名' 指定激活后的样式 严格匹配
router-link和router-view组件是vue-router插件提供的
5.2)编程式跳转
this.$router.push(字符串/对象)://添加一个路由 (记录到历史记录)
this.$router.replace({name:'...'}) //替换一个路由 (不记录到历史记录)
this.$router.go(-1|1)|back()|forward() //回退/前进