Vue-router在项目中的使用及其注意事项

npm install vue-router

import Vue from 'vue'import VueRouter from 'vue-router'import Home from './views/Home.vue'import About from './views/About.vue'Vue.use(VueRouter)const routes = [  {    path: '/',    name: 'home',    component: Home  },  {    path: '/about',    name: 'about',    component: About  }]const router = new VueRouter({  mode: 'history',  base: process.env.BASE_URL,  routes})export default router

<template>  <div id="app">    <router-view></router-view>  </div></template>

<template>  <div class="home">    <h1>欢迎来到电影在线观看网站</h1>    <button @click="goToDetail">查看电影详情</button>  </div></template><script>export default {  methods: {    goToDetail() {      this.$router.push('/detail')    }  }}</script>

<template>  <div class="detail">    <h1>电影详情页</h1>    <p>电影名称：{{ movie.name }}</p>    <p>导演：{{ movie.director }}</p>  </div></template><script>export default {  data() {    return {      movie: {        name: '复仇者联盟',        director: '乔·罗素'      }    }  }}</script>

import Vue from 'vue'import VueRouter from 'vue-router'import Home from './views/Home.vue'import Detail from './views/Detail.vue'Vue.use(VueRouter)const routes = [  {    path: '/',    name: 'home',    component: Home  },  {    path: '/detail',    name: 'detail',    component: Detail  }]const router = new VueRouter({  mode: 'history',  base: process.env.BASE_URL,  routes})export default router

const router = new VueRouter({  mode: 'history',  routes})

// 路由配置const routes = [  {    path: '/detail/:id',    name: 'detail',    component: Detail  }]// 传递参数this.$router.push('/detail/123')// 获取参数this.$route.params.id

// 路由配置const routes = [  {    path: '/detail/:id',    name: 'detail',    component: Detail,    children: [      {        path: 'comment',        component: Comment      }    ]  }]