使用到Vue的項(xiàng)目，我們最常見使用的就是Vue配套的Vue Router庫。
Vue-Router是Vue.js的官方路由

創(chuàng)建路由項(xiàng)目（創(chuàng)建vue-cli2項(xiàng)目，帶vue-router）

電腦終端vue ui
選擇項(xiàng)目路徑，創(chuàng)建項(xiàng)目（項(xiàng)目名稱只能小寫字母，不能大寫）
選擇手動(dòng)配置

截屏2023-05-19 17.05.59.png

I97bKaTU3F.jpg

可以不預(yù)設(shè)(如果預(yù)設(shè)了，會(huì)把這個(gè)項(xiàng)目當(dāng)作模版，下次再創(chuàng)建時(shí)可以選擇這個(gè)模版創(chuàng)建項(xiàng)目)

截屏2023-05-19 17.10.17.png

打開項(xiàng)目，可以直接運(yùn)行
nom run serve

安裝三方：
vue add axios (如果報(bào)錯(cuò)，設(shè)置vue.config.js的lintOnSave:false)
vue add element-ui

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  lintOnSave:false,    //是否開啟編輯器強(qiáng)檢查
  transpileDependencies: true,
  productionSourceMap:false,   //是否暴露源代碼
  outputDir:'betatest'   //打出的包的名稱
})

創(chuàng)建路由項(xiàng)目會(huì)自帶路由配置代碼

router的index.js：路由配置文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)

const routes = [
{
    path: '/home',
    name: 'home',
    component: HomeView  //導(dǎo)入文件路徑，跳轉(zhuǎn)會(huì)快些
  },
{path: '/homework/:id', name: 'Question',meta:{title:'Question'}, component:MatchingDetails},
{
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')  //  這種寫法是懶加載，跳轉(zhuǎn)會(huì)慢些， ../是指相對(duì)當(dāng)前文件的上一層目錄（即：src）
  },
 {
    path: '/HelloWorld',
    name: 'HelloWorld',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '@/components/HelloWorld.vue')  //  @/是指src的絕對(duì)路徑
  }
{
            path: "/",
            redirect: "find" //默認(rèn)顯示推薦組件(路由的重定向)
        },
      
        {
            path: "/find",
            name: "Find",
            component: Find,
            //二級(jí)路由
            children: [{
                    path: "/",
                    redirect: "recom" //默認(rèn)顯示推薦組件
                },
                {
                    path: "ranking", //注意二級(jí)路由的路徑千萬不要加/
                    component: Ranking
                },
            ]
        },
        {
            path: "/my",
            name: "My",
            component: My
        },
       
        {
            path: "*",
            component: NotFound //定義找不到已有組件時(shí)顯示404
        },
    ]

//用規(guī)則生成路由對(duì)象
    // 創(chuàng)建路由對(duì)象并且傳入規(guī)則
const router = new VueRouter({
    routes,
    mode: "history" //路由模式(默認(rèn)為hash模式)
})

掛載路由
main.js

import router from "./router";

//把路由對(duì)象注入到new Vue實(shí)例中
new Vue({
    router, //導(dǎo)入路由對(duì)象
    render: h => h(App),
}).$mount('#app')

//用router-view作為掛載點(diǎn), 切換不同的路由頁面

3.使用路由
例如：
（1）法：標(biāo)簽路由跳轉(zhuǎn)：router-link
app.vue:

<template>
  <div id="app">
    <nav>
<!--       router-link： 路由跳轉(zhuǎn)標(biāo)簽-->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    
<!--     <router-view/>: 路由占位，(默認(rèn)展示第一個(gè)路由頁面)等同于<router-view></router-view>-->
    <router-view/> 

  </div>
</template>

（2）法：js路由跳轉(zhuǎn)：
this.$router.push('/find')

Vue-Router跳轉(zhuǎn)方法

參考：https://blog.csdn.net/xiao_yu_liu/article/details/125003546
https://blog.csdn.net/sebeefe/article/details/126080415

1法、使用router-link
使用router-link標(biāo)簽，我們通常會(huì)使用到2個(gè)參數(shù)，最常用的就是to參數(shù)
to參數(shù)，表示你想要跳轉(zhuǎn)到的路由對(duì)象
router-link標(biāo)簽，會(huì)調(diào)用router.push()方法，該方法會(huì)在你點(diǎn)擊瀏覽器會(huì)退按鈕的時(shí)候，無痕回退一個(gè)路由。

可以是路由路徑
<router-link to="/home">Home</router-link>
<router-link :to="'/home'">Home</router-link>

也可以是路由對(duì)象，甚至還可以為其攜帶參數(shù)
<router-link :to="{ path: '/home' }">Home</router-link>
<router-link :to="{ name: 'user', params: { userId: '123' }}">User</router-link>
<router-link :to="{ path: '/register', query: { plan: 'private' }}">
Register
</router-link>

router-link好處 : 自帶激活時(shí)的類名, 可以做高亮

在跳轉(zhuǎn)路由時(shí), 可以給路由對(duì)應(yīng)的組件內(nèi)傳值
在router-link上的to屬性傳值, 語法格式如下 :
(方式一)
to=/path參數(shù)名=值
例：to="/part?name=小明"
對(duì)應(yīng)頁面組件接收傳遞過來的值
this. $route.query.參數(shù)名接收參數(shù)數(shù)據(jù)：this.$ route.query.name

(方式二)
to=“/path/值” (需在路由規(guī)則里配置/path/:參數(shù)名)
例：to="/part/小王"
配置：path:"/part/:username"
對(duì)應(yīng)頁面組件接收傳遞過來的值（注意動(dòng)態(tài)參數(shù)需要用params接收）
this. $route.params.參數(shù)名接收參數(shù)數(shù)據(jù)：this.$ route.params.username

2法、使用router-replace
設(shè)置 replace 屬性的話，當(dāng)點(diǎn)擊時(shí)，會(huì)調(diào)用 router.replace()，而不是 router.push()，所以導(dǎo)航后不會(huì)留下歷史記錄。
<router-link to="/abc" replace></router-link>
方法1和2是使用html的方法來調(diào)用

3法、編程式-用JS代碼來進(jìn)行跳轉(zhuǎn)
語法: path或者name任選一個(gè), 傳參query或者params
一、$ router 和 $ route的區(qū)別
$router : 是路由操作對(duì)象，只寫對(duì)象$ route : 路由信息對(duì)象，只讀對(duì)象

$router操作路由跳轉(zhuǎn) this.$ router.push({ name:‘hello’, query:{ username:‘word’, age:‘11’ } })
$route讀取路由參數(shù)接收 var name = this.$ route.query.username;
s

路由配置里面設(shè)置路由路徑時(shí)也可以帶參數(shù)
const routes = [
{ path: '/users/:id', component: User },
]
代碼中的**id **字段，就是路徑參數(shù)，當(dāng)使用params的時(shí)候，就可以獲取到。this.$router. params.id

通過params傳參， path會(huì)忽略params 所以path不能和params一起使用
注意：這里使用name路由跳轉(zhuǎn)方式路徑不需要加 / 因?yàn)樗皇莻€(gè)名字
this. $router.push({ name:"Home", params:{ id:this.id } }) 另一個(gè)頁面接收: 這里使用params傳參就需要寫params接收 this.$ route.params.id

通過query傳參，path 和 name路由跳轉(zhuǎn)方式，都可以用query傳參
this. $router.push({ path:"/Search", query:{ //query是個(gè)配置項(xiàng) age:20 } }) 或者 this.$ router.push({
name:"Search",
query:{ //query是個(gè)配置項(xiàng)
age:20
}
})
另一個(gè)頁面接收
this.$route.query.age
query相當(dāng)于GET請(qǐng)求，頁面跳轉(zhuǎn)的時(shí)候，可以在地址欄看到請(qǐng)求參數(shù)

總結(jié)：

query和params區(qū)別：
query相當(dāng)于GET請(qǐng)求，頁面跳轉(zhuǎn)的時(shí)候，可以在地址欄看到請(qǐng)求參數(shù)
params相當(dāng)于POST請(qǐng)求，參數(shù)不會(huì)在地址欄中顯示
使用path方式跳轉(zhuǎn)路由 path會(huì)忽略params 所以path不能和params一起使用
推薦使用name和params方式實(shí)現(xiàn)路由跳轉(zhuǎn)
params傳參，push里面只能是 name:‘xxx’,不能是path:‘/xxx’,因?yàn)閜arams只能用name來引入路由，如果這里寫成了path，接收參數(shù)頁面會(huì)是undefined

target="_blank" 打開新窗口

標(biāo)簽方法：
//當(dāng)前頁面路由跳轉(zhuǎn)：只改變url
 <router-link to="/feedBack">
                            <div class="menus-other-list menus-other-list2 noselect">
                                <p><i class="icon"></i>Feedback</p>
                            </div>
                        </router-link>

//打開新窗口路由跳轉(zhuǎn)：另開了一個(gè)頁面
 <router-link to="/feedBack" target="_blank">
                            <div class="menus-other-list menus-other-list2 noselect">
                                <p><i class="icon"></i>Feedback</p>
                            </div>
                        </router-link>




js方法：
//默認(rèn)是當(dāng)前窗口替換為新路徑
 this.$router.push('/login')
this.$router.push({path:'/matched-results',query:{questionText:this.input_str}});

//打開新窗口路由跳轉(zhuǎn)：另開了一個(gè)頁面
let text= this.$router.resolve({
                    path: "/feedback"
                });
 window.open(text.href, '_blank')

動(dòng)態(tài)路由：

頁面路徑：src/views/homeWork.vue
homeWork.vue的js:
export default {
name: "HomeWork",
}

router/index.js:
{path: '/homework/:id', name: 'HomeWork',meta:{title:'Homework'}, component: HomeworkComponent},

跳轉(zhuǎn)：

<router-link target="_blank" @click.native="clickDetails('View Answer-htmlContent')" :to="'/homework/'+item.id">
</router-link>
2.js跳轉(zhuǎn)
this.$router.push('/homework/'+item.id");

獲取id的值：
this.$route.params.id

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue-Router路由框架

Vue-Router路由框架

創(chuàng)建路由項(xiàng)目（創(chuàng)建vue-cli2項(xiàng)目，帶vue-router）

創(chuàng)建路由項(xiàng)目會(huì)自帶路由配置代碼

Vue-Router跳轉(zhuǎn)方法

target="_blank" 打開新窗口

動(dòng)態(tài)路由：

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue-Router路由框架

創(chuàng)建路由項(xiàng)目（ 創(chuàng)建vue-cli2項(xiàng)目，帶vue-router）

創(chuàng)建路由項(xiàng)目會(huì)自帶路由配置代碼

Vue-Router跳轉(zhuǎn)方法

target="_blank" 打開新窗口

動(dòng)態(tài)路由：

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

創(chuàng)建路由項(xiàng)目（創(chuàng)建vue-cli2項(xiàng)目，帶vue-router）