如何配置Vue路由跳转
第一步:安装Vue路由
在Vue项目文件夹中,打开终端并输入以下命令来安装Vue路由:
```
npm install vue-router
```
第二步:修改router文件夹下的index.js
打开`index.js`文件,将以下代码添加到文件顶部:
```javascript
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import Detail from '@/components/Detail';
(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/detail',
name: 'Detail',
component: Detail
}
]
})
```
第三步:在需要使用路由的组件中引入
在需要使用路由的位置,将以下代码放置在``标签中,指定需要使用路由的位置为`
```html
```
第四步:在需要跳转的地方使用
在想要进行路由跳转的地方,使用`
```html
```
第五步:在被跳转的页面获取参数
在被跳转到的页面中,可以通过字符串拼接的方式来获取传递过来的ID参数。例如:
```html
详情页 {{ this.$ }}
import axios from 'axios';
export default {
name: "detail",
data: function() {
return{
film: {
poster: {}
}
}
},
mounted: function(){
console.log(this);
();
},
methods: {
getList: function(){
var that this;
(`/v4/api/film/${this.$}?__t1528353125502`)
.then(function(res){
console.log(res);
;
})
}
}
}
```
以上就是配置Vue路由跳转的步骤。通过安装Vue路由、修改`index.js`文件、引入路由组件、使用`
版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。