Vue路由的使用

463 阅读1分钟

这是我参与11月更文挑战的第27天,活动详情查看:2021最后一次更文挑战

路由

路由的使用

安装

cnpm install vue-router -S

1.设置路由规则

const routes = [
 //页面1
 { path:'/foo', component: Foo },
 //页面2
 { path:'/about', component: About },
]

2.配置路由规则

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
 routes
})
new Vue({
 el:'#app'
 router
})

3.设置路由切换后页面的显示位置

<router-view></router-view>

4.实现路由跳转

<router-link to="/about"></router-link>

测试

安装

image-20211126103327316

新建文件夹及两个文件

image-20211126103531063

分别为

<template>
  <h1>首页</h1>
</template>
<template>
  <h1>关于</h1>
</template>

src下新建router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomePage from './views/Home.vue'
import AboutPage from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/home', component: HomePage },
  { path: '/about', component: AboutPage },
]

const route = new VueRouter({
  routes
})

export default route

main.js 配置

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')

app.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行结果:

image-20211126104525939

image-20211126104449325

参数传递

设置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomePage from './views/Home.vue'
import AboutPage from './views/About.vue'
import DetailPage from './views/Detail.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/home', component: HomePage },
  { path: '/about', component: AboutPage },
  { path: '/detail/:id', component: DetailPage },
]

const route = new VueRouter({
  routes
})

export default route

新建views Detail.vue

<template>
  <h1>{{ id }}</h1>
</template>
<script>
export default {
  data () {
    return {
      id: ''
    }
  },
  watch: {
    $route (to, from) {
      this.id = this.$route.params.id
    }
  },
  created () {
      let id = this.$route.params.id
      this.id = id
  }
}
</script>

效果

image-20211126142025821

获取URL中的参数

Detail.vue

<template>
  <div>
    <h1>{{ id }}</h1>
    <h2>{{ name }}</h2>
  </div>
</template>
<script>
export default {
  data () {
    return {
      id: '',
      name: ''
    }
  },
  watch: {
    $route (to, from) {
      console.log('to', to)
      console.log('from', from)
      this.id = this.$route.params.id
    }
  },
  created () {
      let id = this.$route.params.id
      this.id = id

      let name = this.$route.query.name
      this.name = name
  }
}
</script>

image-20211126143053012

路由的跳转

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-link to="/home">首页</router-link>|
    <router-link to="/about">关于</router-link>|
    <router-link :to="'/detail/' + id ">详情</router-link>|
    <router-link :to="{ path: '/detail/' + id, query: { name: 'abc', sort: 'desc'} }">详情</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      id: 456,
      types: 'type2'
    }
  },
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

image-20211126150559241

image-20211126150610050

路由命名

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomePage from './views/Home.vue'
import AboutPage from './views/About.vue'
import DetailPage from './views/Detail.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/home', component: HomePage },
  { path: '/about', component: AboutPage },
  { path: '/detail/:id', component: DetailPage, name: 'detail-page'},
]

const route = new VueRouter({
  routes
})

export default route

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-link to="/home">首页</router-link>|
    <router-link to="/about">关于</router-link>|
    <router-link :to="'/detail/' + id ">详情</router-link>|
    <router-link :to="{ path: '/detail/' + id, query: { name: 'abc', sort: 'desc'} }">详情</router-link>|
    <router-link :to="{ name: 'detail-page', params: { id: '123' }, query: { name: 'abc' }}">详情</router-link>
    
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      id: 456,
      types: 'type2'
    }
  },
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果:

image-20211126151516355

路由的跳转

this.$router.push()

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomePage from './views/Home.vue'
import AboutPage from './views/About.vue'
import DetailPage from './views/Detail.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/home', component: HomePage, name: 'home' },
  { path: '/about', component: AboutPage },
  { path: '/detail/:id', component: DetailPage, name: 'detail-page'},
]

const route = new VueRouter({
  routes
})

export default route

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-link to="/home">首页</router-link>|
    <router-link to="/about">关于</router-link>|
    <router-link :to="'/detail/' + id ">详情</router-link>|
    <router-link :to="{ path: '/detail/' + id, query: { name: 'abc', sort: 'desc'} }">详情</router-link>|
    <router-link :to="{ name: 'detail-page', params: { id: '123' }, query: { name: 'abc' }}">详情</router-link>
    |<a href="#" @click="goHome">跳转</a>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      id: 456,
      types: 'type2'
    }
  },
  methods: {
    goHome () {
      this.$router.push({name:'home'})
    }
  },
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果

image-20211126154126570

跳转到某个历史记录界面

this.$router.go(-1) 跳转到上一个界面

替换历史记录

this.$router.replace({name:'home'})

点击后退将进入home界面