您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

20Vue路由编程式导航以及hash模式-完整(编程式导航,命名路由,路由模式)

发布时间：2023-04-11 11:25:14编辑：雪饮阅读（）

编程式导航
所谓编程式导航，其实就是用JavaScript代码而不是直接使用router-link标签进行跳转。
那么基于前面的环境。这里我们可以修改下App.vue和news.vue里面的导航如
App.vue:
<template>
  <div id="app">
    <button @click="goto('/')">首页</button>
    <button @click="goto('/news')">新闻</button>
    <hr/>
    <router-view></router-view>
  </div>
</template>
 
<script>
    export default {    
      data () {
        return {}
      },
      methods:{
        goto(url){
           //编程式导航
          this.$router.push({path:url});
        }
      },
    }
</script>
同样的news.vue
<template>
    <div id="news">
        这里是新闻列表页
        <ul>
            <li v-for="item in list">
                <button @click="goto('/news/content1/'+item)">新闻编号{{item}}(进入文章详情1页面)</button>
                <button @click="goto('/news/content2?aid='+item)">新闻编号{{item}}(进入文章详情2页面)</button>
            </li>
        </ul>
    </div>
</template>
<script>
export default{
    data(){
        return {
            list:[1,2,3,4,5]
        }
    },
    methods:{
        goto(url){
          this.$router.push({path:url});
        }
    }
}
</script>
 
命名路由
命名路由就是说在main.js中每个路由条目都有一个名称，那么通过编程式导航时候可以不用url路径这种不太方便的方法进行push，而是可以直接根据所命名的路由条目名称来push
main.js如
import Vue from 'vue'
import App from './App.vue'
 
import VueRouter from 'vue-router';
Vue.use(VueRouter);
 
import Index from './components/Index.vue';
import News from './components/news.vue';
import Content1 from './components/content1.vue';
import Content2 from './components/content2.vue';
 
import './assets/css/basic.scss';
 
const routes=[
  //命名路由
  {path:'/',component:Index,name:'index'},
  //命名路由
  {path:'/news',component:News,name:'news'},
   {path:'/news/content1/:aid',component:Content1},
   {path:'/news/content2',component:Content2},
  {path:'*',component:Index}
];
const router=new VueRouter({routes})
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
然后App.vue中则可以里面name来push
<template>
  <div id="app">
    <button @click="goto('index')">首页</button>
    <button @click="goto('news')">新闻</button>
    <hr/>
    <router-view></router-view>
  </div>
</template>
 
<script>
    export default {    
      data () {
        return {}
      },
      methods:{
        goto(name){
           //利用name来push
          this.$router.push({name:name});
        }
      },
    }
</script>
 
路由模式
路由模式默认是hash模式，也就可以看到地址栏有带有#号的这种。
另外有一种history模式，就是地址栏里面没有#号的，更好看点，但需要注意和后端服务器的路由的兼容匹配（如果只是纯前端项目，感觉应该是history更好，如果前后端配合，那么就要结合自己的业务来考量了）。
总结起来就是hash模式更好稳点，history更好看。个人理解。
如果要配置history模式则在main.js配置如
import Vue from 'vue'
import App from './App.vue'
 
import VueRouter from 'vue-router';
Vue.use(VueRouter);
 
import Index from './components/Index.vue';
import News from './components/news.vue';
import Content1 from './components/content1.vue';
import Content2 from './components/content2.vue';
 
import './assets/css/basic.scss';
 
const routes=[
  {path:'/',component:Index,name:'index'},
  {path:'/news',component:News,name:'news'},
   {path:'/news/content1/:aid',component:Content1},
   {path:'/news/content2',component:Content2},
  {path:'*',component:Index}
];
const router=new VueRouter({
  routes,
  //配置路由模式
  mode:'history'
})
 
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})