如何配置Vue路由跳轉
第一步:安裝Vue路由在Vue項目文件夾中,打開終端并輸入以下命令來安裝Vue路由:```npm install vue-router```第二步:修改router文件夾下的index.js打開`in
第一步:安裝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`文件、引入路由組件、使用`